没有脱离文档流为什么子元素[外边距]还撑不起来父元素

V2EX = way to explore

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

现在注册

已注册用户请登录

Can I use?

http://caniuse.com/

Less

http://lesscss.org

Cool Libraries

Bootstrap from Twitter

Jetstrap

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

如题，小弟刚学前端 CSS 问题如图网站 https://wfion.com

我开始排查问题得时候，只排查了 body 得 css 。请教前端同事了，他只知道我图中元素影响了超出了 body 但是他不知道什么原因

CSS

body

排查

元素

6 条回复 2023-03-28 12:14:51 +08:00

anjianshi

2023-03-27 18:27:50 +08:00

如果“父元素的边缘”和“子元素的边缘”之间没有任何“会占用空间”的东西，那么子元素的 margin-top / margin-bottom 会穿透到父元素外面。

解决办法 1：父元素设置 overflow: hidden;
解决办法 2：子元素不要用 margin-top / margin-bottom ，改用 padding-top / padding-bottom

Al0rid4l

2023-03-27 20:46:43 +08:00

要用 margin 撑起父元素, 需要一个 XFC, 通常是 BFC, 很多属性可以触发, overflow, flow, position:absolute 等等, 不过标准一点的做法是直接给 body 一个 display: flow-root 完事, 其他方式副作用会多点

linuxsteam

2023-03-27 22:06:27 +08:00

@Al0rid4l 好的谢谢我都去研究下，有人也建议让我学习盒模型

linuxsteam

2023-03-27 22:07:24 +08:00

@anjianshi 好的谢谢。这种东西我都不知道咋学习了。搜索也不会用关键字

linuxsteam

2023-03-28 11:49:48 +08:00

@anjianshi 我看网上说的是
当上下相邻的两个块级元素（兄弟元素）相遇时，如果上面的元素有下外边距 margin-bottom ，下面的元素有上边距 margin-top ，则它们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值之中较大的，这种现象被称为 margin 重叠

linuxsteam

2023-03-28 12:14:51 +08:00

@linuxsteam 抱歉我弄错了，这是 margin 合并，父子元素是 margin 塌陷