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

2018-09-21 10:20:40 +08:00
 caopi

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

我就纳闷了

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

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

https://www.v2ex.com/t/491426

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

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

© 2021 V2EX