#书摘 #css #前端
《CSS 世界》margin无效情形解析
「因为 margin 属性的诸多特异性，所以，我们在实际开发的时候，经常会遇到设置的margin无效的情形，这里我罗列一下，希望大家遇到类似的问题知道原因以及如何对症下药。」
1. display 计算值为 inline 的非替换元素的垂直 margin 是无效的，虽然规范提到有渲染，但浏览器表现却未寻得一点踪迹，这和padding是有明显区别的。对于内联替换元素，垂直margin有效，并且没有margin合并的问题，所以图片永远不会发生margin合并。
2. 表格中的 <tr> 和 <td> 元素或者设置display 计算值是table-cell或table-row的元素的margin都是无效的。但是，如果计算值是table-caption、table或者inline-table则没有此问题，可以通过margin 控制外间距，甚至::first-letter伪元素也可以解析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值我们在页面上是看不到定位变化的。(但实际上是有margin的，见p2)
5. 定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。(看上去就像是“失效”一样，见p2)
6. 鞭长莫及导致的margin无效。
比较抽象，后边再介绍
7. 内联特性导致的margin无效。（p4）
《CSS 世界》margin无效情形解析
「因为 margin 属性的诸多特异性，所以，我们在实际开发的时候，经常会遇到设置的margin无效的情形，这里我罗列一下，希望大家遇到类似的问题知道原因以及如何对症下药。」
1. display 计算值为 inline 的非替换元素的垂直 margin 是无效的，虽然规范提到有渲染，但浏览器表现却未寻得一点踪迹，这和padding是有明显区别的。对于内联替换元素，垂直margin有效，并且没有margin合并的问题，所以图片永远不会发生margin合并。
2. 表格中的 <tr> 和 <td> 元素或者设置display 计算值是table-cell或table-row的元素的margin都是无效的。但是，如果计算值是table-caption、table或者inline-table则没有此问题，可以通过margin 控制外间距，甚至::first-letter伪元素也可以解析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值我们在页面上是看不到定位变化的。(但实际上是有margin的，见p2)
5. 定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。(看上去就像是“失效”一样，见p2)
6. 鞭长莫及导致的margin无效。
比较抽象，后边再介绍
7. 内联特性导致的margin无效。（p4）
