margin失效情形解析

margin属性在以下情况下会失效

display计算值为inline的垂直margin无效

<p style="margin-top: 40px;display: inline;">content</p>

表格中的tr和td元素或者display计算值为table-cell或table-row的元素

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

• 绝对定位元素非定位方位的 margin 值“无效”。

主要是因为绝对定位元素的渲染是独立的，普通元素和兄弟元素是心连心，你动我也动，但是绝对定位元素由于独立渲染无法和兄弟元素插科打诨，因此，margin 无法影响兄弟元素定位，所以看上去就“无效”。

定高容器的子元素的 margin-bottom 或者宽度定死的子元素的 margin-right 的定位“失效”。原因在于，若想使用 margin 属性改变自身的位置，必须是和当前元素定位方向一样的 margin 属性才可以，否则，margin 只能影响后面的元素或者父元素。

我们直接看下面这个例子

<div class="box">
<img src="mm1.jpg">
<p>内容</p>
</div>
.box > img {
float: left;
width: 256px;
}
.box > p {
overflow: hidden;
margin-left: 200px;
}

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

内联特性导致的 margin 无效。