今天同事遇到了一个很奇怪的问题。
简化来看,最初的原因是这样的:
上代码:
<html>
<body>
<div style="background:black;width:300px;height:300px;">
<div style="background:blue;width:200px;height:200px;">
<div style="background:pink;width:100px;height:100px;">
<h1>TEXT</h1>
</div>
</div>
</div>
</body>
</html>
这里写了三个互相嵌套的DIV,这很寻常,它现在的效果是这样的:
现在他本来想让粉色的DIV距离顶部有一个距离,也就是想要这样一个效果:
所以他给粉色的DIV加入了上边距和左右边距:margin:100px auto
就像下面这样:
<html>
<body>
<div style="background:black;width:300px;height:300px;">
<div style="background:blue;width:200px;height:200px;">
<div style="background:pink;width:100px;height:100px;margin:100px auto;">
<h1>TEXT</h1>
</div>
</div>
</div>
</body>
</html>
然后事情就开始变得奇妙了,他发现不光粉色的DIV下移了100像素,甚至所有的DIV都下移了。
这个时候,我们都感觉很惶恐,感觉像是其他地方搞错了什么,我们花了大约半个小时的时间在各种浏览器上调试,开关各种属性,都是同样的结果。
直到我做了这个小实验,才发现CSS的这个特性。
我也很惊讶,我也写过很多的页面,居然从来都没有遇到过这样的问题。
后来查过资料才发现这个问题叫做“CSS外边距叠加的问题”
详情可以查看:http://www.dabaoku.com/jiaocheng/wangye/css/20091002545.shtml
和http://www.hujuntao.com/web/css/css-margin-overlap.html
大概就是要给被影响的元素加上display:inline-block
属性
把他们变成行内块就好了。
就像这样:
<html>
<body>
<div style="background:black;width:300px;height:300px;">
<div style="background:blue;width:200px;height:200px;display:inline-block">
<div style="background:pink;width:100px;height:100px;margin:100px auto;">
<h1>TEXT</h1>
</div>
</div>
</div>
</body>
</html>
这个达到了他想要的结果。
以下为网上的相关资料:
简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:
当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。请看下图:
尽管看上去有些奇怪,但是外边距甚至可以与自身发生合并。
假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:
如果这个外边距遇到另一个元素的外边距,它还会发生合并:
这就是一系列的段落元素占用空间非常小的原因,因为它们的所有外边距都合并到一起,形成了一个小的外边距。
外边距合并初看上去可能有点奇怪,但是实际上,它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并,后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并,段落之间的上外边距和下外边距就合并在一起,这样各处的距离就一致了。
另外,只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并
防止外边距重叠解决方案:
虽然外边距的重叠有其一定的意义,但有时候我们在设计上却不想让元素之间产生重叠,那么可以有如下几个建议可供参考:
- 外层元素padding代替
- 内层元素透明边框 border:1px solid transparent;
- 内层元素绝对定位 postion:absolute:
- 外层元素 overflow:hidden;
- 内层元素 加float:left;或display:inline-block;
- 内层元素padding:1px;
以上建议可根据实际情况来采取。