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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2042 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

我就纳闷了

11 条回复 • 2018-09-29 14:57:28 +08:00

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 via Android

8 楼正解搞个 BFC 就好了

caopi

2018-09-21 18:28:35 +08:00

@rabbbit margin 为 0 也会合并是吗

supuwoerc

2018-09-29 14:57:28 +08:00

外边距折叠的问题吧。。bfc 划块解决之