刘文柱

# css 外边距 margin 重叠及其解决方法

WARNING

只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。

# 一、边界叠加情况

# 1、底边界与顶边界叠加

当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，见图

# 2、元素的顶边界与前面元素的底边界发生叠加

当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界也发生叠加，见图：

# 3、元素的顶边界与父元素的顶边界发生叠加

尽管初看上去有点儿奇怪，但是边界甚至可以与本身发生叠加。假设有一个空元素，它有边界，但是没有边框或填充。在这种情况下，顶边界与底边界就碰到了一起，它们会发生叠加，见图：

# 4、元素的顶边界与底边界发生叠加

如果这个边界碰到另一个元素的边界，它还会发生叠加，见图：

# 二、叠加原因

在规范文档中，2 个或以上的块级盒模型相邻的 垂直 margin会重叠（ 水平边距永远不会重合）。最终的 margin 值计算方法如下：

  1. 全部都为正值，取最大者；

  2. 不全是正值，则都取绝对值，然后用正值减去最大值；

  3. 没有正值，则都取绝对值，然后用 0 减去最大值。

    注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系

# 三、解决方法

  1. 外层元素 padding 代替
  2. 内层元素透明边框 border:1px solid transparent;
  3. 内层元素绝对定位 postion:absolute:
  4. 外层元素 overflow:hidden;
  5. 内层元素 加 float:left;或 display:inline-block;
  6. 内层元素 padding:1px;

← 布局 →