彻底搞懂 margin 重叠问题
💪 古之立大事者,不唯有超世之才,亦必有坚忍不拔之志。—— 苏轼
先唠一下
为什么会写这一篇博客呢?因为 margin
这个 CSS 属性的重叠问题,经常在我们的开发过程中会遇到很多问题,严重的时候会导致我们的页面整体布局都会变乱。今天就通过这篇博文,来研究一下 margin 重叠的问题。
外边距重叠问题
外边距重叠只发生在块级元素上,例如 <div>
<p>
等,并不会发生在脱离文档流的元素上,例如:设置 float
属性,或者 position
的值为 absolute
时。
发生外边距重叠的情况
-
相邻兄弟元素的外边距重叠
示例代码如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>相邻兄弟元素的外边距重叠</title> <style> .box { width: 600px; height: 100px; line-height: 50px; text-align: center; color: #333; } .box1 { background-color: #f60; margin-bottom: 100px; } .box2 { background-color: #a90; margin-top: 100px; } </style> </head> <body> <div class="box box1">box1</div> <div class="box box2">box2</div> </body> </html>
如果按照我们正常的思维逻辑的话
box1
和box2
中间的边距应该是200px
,但事实并不是这样的,如下图事实上,目前就已经出现了外边距重叠问题。
-
父级与子级的外边距重叠
示例代码如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>父级与子级的外边距重叠</title> <style> .box { line-height: 50px; text-align: center; color: #333; } .parent { width: 600px; height: 100px; background-color: #f60; margin-top: 100px; } .child { width: 600px; height: 50px; background-color: #a90; margin-top: 50px; } </style> </head> <body> <div class="box parent"> <div class="box child">child</div> </div> </body> </html>
如果仅仅只看我们的代码的话,父级的
margin-top
为100px
,子级的margin-top
为50px
,,如果相加的话为150px
,但实际结果如下所示:父级与子级的外边距重叠问题须没有一下任意一项才能实现
margin-top
重叠- 父级元素不是 BFC 元素。
- 父元素没有
border-top
属性 - 父元素没有
padding-top
属性 - 父元素与第一个子元素之间没有 行内元素 进行分割。
margin-bottom
重叠- 父级元素不是 BFC 元素。
- 父元素没有
border-top
属性 - 父元素没有
padding-top
属性 - 父元素与第一个子元素之间没有 行内元素 进行分割。
- 父元素没有高度限制
-
空
block
元素的外边距重叠示例代码如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>空 block 元素的外边距重叠</title> <style> .parent { width: 600px; height: 10px; background-color: #f60; } .child { margin: 50px 0; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>
代码结果如下所示:
子级元素的外边距与
body
的8px
的margin
进行了重叠。空 block 元素外边距重叠触发条件必须满足如下
- 元素没有
border
属性 - 元素没有
padding
属性 - 里面没有
inline
元素 - 没有设置高度。
- 元素没有
外边距重叠计算规则
外边距重叠的计算规则如下:
- 两个正数的外边距取最大的边距作为外边距。
- 如果一个为正数,一个为负数,最终的外边距为两者之和。
- 如果两个值都是负数的话,最终的外边距取绝对值最大的值。
写在最后
既然存在外边距重叠的问题,那么我们在实际开发中就要好好的利用这一特性,例如在写一个列表的时候,尽量不要仅仅只写上外边距或者下外边距,尽量两者都一起写上,避免我们的底部或者头部的布局不是我们想要的效果