乐趣区

margintop-外边距合并

jiezi

这是一个早以前研究过的东西，今天 java 开发说起了这个，顺带记录一下。
这里有一行代码，很简单的一段代码

<style type="text/css">
#div1{
    background:#000;
    width:100px;
    height:100px;
    margin-top:10px;
}
#div2{
    margin-top:20px;
    background:#f00;
    width:50px;
    height:50px;
}
</style>
<div id="div1">
    <div id="div2"></div>
</div>

可是在浏览器中打开后，居然是这个样子的~

(黑色的区块为 div1, 红色的为 div2)

从效果上看 div2 的 margin-top 像是没有生效，经测量 div1 的 margin-top 值，发现这个 div2 的 margin-top 像是生效到 div1 上了。

就这几行代码写错是不大可能，那这又是怎么回事？

之前遇到这个问题时，试遍了所有的浏览器，都是这个样子；我就觉着这是个兼容性极佳的 BUG。

后来一个偶然的机会发现在父级上增加 border 或者 overflow:hidden 是可以规避这个问题，且这个问题只会在常规流向中出现，也就是说用 position 或者是 float 都不会存在这个问题。

整点原理规范什么的提高一下；百度一下，你就知道。。

边距重合 来源:W3C CSS2.1

在本规范中，表述边距重合意味着两个或多个框（可能相邻也可能嵌套）的相邻的边距（其间没有边白或边框间隔）重合在一起而形成一个单一的边距。
CSS2 中，水平边距永远不会重合。

垂直边距可能在特定的框之间重合：

  • 常规流向中两个或多个块框相邻的垂直边距会重合。结果的边距宽度是相邻边距宽度中较大的值。如果出现负边距，则在最大的正边距中减去绝对值最大的负边距。如果没有正边距，则从零中减去绝对值最大的负边距。
  • 在一个浮动框和其它框之间的垂直边距不重合。
  • 绝对和相对定位的框的边距不重合。

首先了解到这并不是 BUG，而是个规范，虽然看上去像是 BUG
按着规范试一下, 觉着还是像是个 BUG。

看规范是一目十行，过目就忘, 还是整理一下。

外边距合并的触发条件：

  • 常规流向布局，未使用定位或者是浮动
  • 存在垂直边距
  • 父级元素不存在 border,overflow:hidden
  • 在父级元素与子元素之间不存在拥有实际高度的元素(包含文本)

外边距合并的解决方式：

  • 父级元素增加 border,overflow
  • 使用定位或者是浮动
  • 使用 padding-top 替代 margin-top, 比较推荐这个。

随笔一行
这是前端最好的时代，这也是前端最坏的时代。众多前端框架满天飞，随着 jQuery 在前端行业的慢慢弱化，总是会有一种斯人远去，何者慰籍的感觉。互勉吧，各位。

另推荐个表格组件 gridManager

退出移动版