margin出bug---margin失效

我们在制作网页的时候，经常遇到margin无效的情况，出现这样的bug我们该怎样解决呢，以下我整理了以下情况，希望对大家有用。

（1）表格中的和元素或者设置display计算值是table-cell或table-row元素的margin无效。
但是，如果计算值是table-caption、table或者inline-table则没有问题，可以通过margin控制外边距，甚至::first-letter伪元素也可以解析margin。

（2）display计算值inline的非替换元素的垂直margin是无效的，虽然规范提到有渲染，但浏览器表现却未寻得一点踪迹，这和padding有明显区别的。
对于内联替换元素，垂直margin有效，并且没有margin合并问题，所以图片永远不会发生margin合并。

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

（4）绝对定位元素非定位方向的margin值**“无效”**。
很多时候我们对元素进行绝对定位的时候，只会设置1-2个相邻方位。例如：

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

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

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

此时margin-right：30px；几乎就是摆设。是margin没有起作用吗？
实际上不是的，绝对定位元素任意方向的margin值无论在什么场景下都一直有效。譬如这个例子，假设宽度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值“无效”类似，原因在于若想使用margin属性改变自身位置，必须是和当前元素定位方向一样的margin属性才可以，否则margin只能影响后面的元素或者父元素。

（6）鞭长莫及导致的margin无效，请看下面例子

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

这里的margin-left：200px是无效的，准确来说，此时的

的margin-left从负无穷到256px都是没有任何效果的，要解释这里为什么无效，需要对float和overflow深入理解，我们以后再细谈，哈哈，留个悬念。