关于外边距合并问题

2、margin相邻折叠问题

在开发中,我们偶尔会遇到明明两个div都设置了margin,可是它们之间的距离就是不等于两个div的margin之间的和,这是为什么呢?其实是因为在某些情况下,两个或多个块元素的相邻边界(其间没有任何非空内容、padding、边框)会发生合并成单一边界,也就是标题说的折叠。

先来看看兄弟块级元素的折叠,如下图所示:

 

 

还要注意的是,父元素与其子元素之间也会发生折叠:

 

 

2个或多个块级相邻元素的外边距(margin)的折叠规则:

  • 外边距都为正值时,取最大值
  • 不全是正值时,则用正值减去(所有值的绝对值中)最大值
  • 全为负值时,则取最小值

不发生折叠情况:

  • 水平(左右)外边距不会折叠
  • 浮动元素的外边距不会折叠,并且浮动元素与它的子元素之间也不会发生折叠
  • 设置了overflow且值不为visible的块级元素与它的子元素之间的外边距也不会被折叠
  • 绝对定位(position:absolute;)元素的margin不与任何margin发生折叠,并且与它的子元素之间的margin也不会发生折叠

解决折叠的方法:

  • 外层元素用padding替代margin
  • 外层元素设置overflow:hidden
  • 内层元素加padding:1或者border
  • 内层元素加浮动(float)或设为(display:inline-block)
  • 内层元素使用绝对定位(position:absolute;)
posted @ 2017-06-03 09:23  情绪控攻城狮  阅读(285)  评论(0编辑  收藏  举报