求教，父元素不包括子元素的 margin 是怎么回事？

2018 年 9 月 21 日
 caopi

我设置了 box-sizing: border-box;但是父元素高度只等于子元素的内容高度，不包括 margin 的高度。

我就纳闷了

3096 次点击
所在节点    前端开发
11 条回复
caopi
2018 年 9 月 21 日
按道理说，设置了盒模型应该可以包含 margin 了
caopi
2018 年 9 月 21 日
加入 bfc 高度就包含子元素 margin 了，搞不懂了
rabbbit
2018 年 9 月 21 日
父元素没有 bord,所以子元素的 margin 跑出去了
生成 BFC 后,内部元素不受外部影响,就又包括了
你可以想象 BFC 是个盒子,把里边的都包起来了
rabbbit
2018 年 9 月 21 日
bord -> border
ToHaveLight
2018 年 9 月 21 日
有可能是垂直外边距重叠了
FakeLeung
2018 年 9 月 21 日
父元素：
border: 1px solid transparent;
caopi
2018 年 9 月 21 日
@rabbbit 没有 border 就会跑出去是怎么回事呢？
rabbbit
2018 年 9 月 21 日
边距合并,只要两个 margin 相遇了,他们中间没有东西,就会和并(除 bfc)
甚至,如果元素没 height/border 只有 margin,上下俩 margin 也会合并
enjoyCoding
2018 年 9 月 21 日
8 楼正解 搞个 BFC 就好了
caopi
2018 年 9 月 21 日
@rabbbit margin 为 0 也会合并是吗
supuwoerc
2018 年 9 月 29 日
外边距折叠的问题吧。。bfc 划块解决之

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://study.congcong.us/t/491426

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX