《CSS世界》读书笔记（十三）

<!-- 《CSS世界》张鑫旭著 -->

margin 无效情形解析

（1）display 计算值 inline 的非替换元素的垂直 margin 是无效的。对于内联替换元素，垂直 margin 有效，并且没有 margin 合并的问题，所以图片永远不会发生 margin 合并。

（2）表格中的<tr>和<td>元素或者设置 display 计算值是 table-cell 或 table-row 的元素 margin 都是无效的。

（3） margin 合并的时候，更改 margin 值可能是没有效果的。以父子 margin 重叠为例，假设父元素设置有 margin-top: 50px，则此时子元素设置 margin-top: 30px 就没有任何效果表现，除非大小比 50px 大，或者是负值。

（4）绝对定位元素非定位方位的 margin 值“无效”。例如：

img { top: 10%; left: 30%; }

此时 right 和 bottom 值属于 auto 状态，也就是右侧和底部没有进行定位，此时这两个方向设置 margin 值我们在页面上是看不到定位变化的。例如：

img {
    top: 10%; left: 30%;
    margin-right: 30px;
}

此时 margin-right: 30px 几乎就是摆设。是 margin 没起作用吗？实际上不是的，绝对定位元素任意方位的 margin 值无论在什么场景下都一直有效。譬如这个例子，假设<img>宽度 70%，同时父元素是具有定位属性，且 overflow 设置为 auto 的元素，则此时就会出现水平滚动条，因为 margin-right: 30px 增加了图片的外部尺寸。

那为什么一般情况下没有效果呢？主要是因为绝对定位元素的渲染是独立的，普通元素和兄弟元素是心连心，你动我也动，但是绝对定位元素由于独立渲染无法和兄弟元素插科打诨，因此，margin 无法影响兄弟元素定位，所以看上去“无效”。

（5）定高容器的子元素的 margin-bottom 或者宽度定死的子元素的 margin-right 的定位“失效”。

<div class="box">
    <div class="child"></div>
</div>

.box {
    height: 100px;
}
.child {
    height: 80px;
    margin-bottom: 100px;
}

这里，margin-bottom: 100px 是不会在容器底部形成 100px 的外间距的，看上去像是“失效”一样。margin-right 的例子类似。

实际上，这个现象的本质和上面绝对定位元素非对立方位的 margin 值“无效”类似。原因在于，若想使用 margin 属性改变自身的位置，必须是和当前元素定位方向一样的 margin 属性才可以，否则，margin 只能影响后面的元素或者父元素。

例如，一个普通元素，在默认流下，其定位方向是左侧以及上方，此时只有 margin-left 和 margin-top 可以影响元素的定位。但是，如果通过一些属性改变了定位方向，如 float: right 或者绝对定位元素的 right 右侧定位，则反过来 margin-right 可以影响元素的定位， margin-left 只能影响兄弟元素。

（6）鞭长莫及导致的 margin 失效。

<div class="box">
    <img src="1.jpg">
    <p>内容</p>
</div>

.box > img {
    float: left;
    width: 256px;
}
.box > p {
    overflow: hidden;
    margin-left: 200px;
}

其中的 margin-left: 200px 是无效的，准确地讲，此时的<p> 的 margin-left 从负无穷到 256px 都是没有任何效果的。

（7）内联特性导致的 margin 无效。（和幽灵空白节点有关，所以前提是文档声明是HTML5文档声明）