<!-- 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 文档声明)
来源: http://www.bubuko.com/infodetail-2733615.html