`
plassey
  • 浏览: 6259 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

margin-top 无效,避开麻烦的margin叠加(margin collapsing)

 
阅读更多
问题:
?
<div id="top" style="height:100px;background-color:#CCC;"></div>
<div id="parent" style="background-color:#F9F; overflow:hidden;">
<div id="child" style="margin-top:10px; background-color:#99F;">想实现效果: Chile 与 parent 间有 10px 间距 <br /> 可 margin-top:10px; 后, 是 parent 与 wrap 间有 10px 间距</div><div></div>
</div>
暂时解決方法:
1、在 parent 窗体中 加入 : overflow:hidden;
2、在父级内部的添加上、下两个空元素    : 有些教科书上将这种方法称为完美的解决方法。但实际当中我们一般不会使用,因为这种方法不仅要多加两个无意义元素标签,对这两个元素还要特别设置CSS使其高度为0。)
3、給 parent 窗体加 个 border 属性,属性值不能为 none; 0 ;
4、parent 窗体加: float:left; (clear:both;)
以下转自:http://www.cssass.com/blog/?p=164
在斯芬克斯——ie私有属性haslayout这篇文章中,我们提到的第一个斯芬克斯之迷,其实就是一个margin叠加问题。
关于margin collapsing,在W3C中是有明文规范的,符合其规则的都将产生margin collapsing。W3C认为margin叠加后的布局界面更良好。
margin collapsing(css2.1规范)
margin collapsing(css2规范)
margin叠加现象(父子级别):
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<style type="text/css">
*{padding:0;margin:0;}
#wrap{background:#ccc;}
#content{background:#eee;margin:50px 0;}
</style>
</head>
<body>
<div id="wrap">
<div id="content">margin:50px 0;</div>
</div>
</body>
</html>
可以看出wrap未被子层的margin所撑开。
但是,这种margin叠加往往不是 我们所想要的效果(一些人甚至将此称为一个bug:margin叠加bug,也有称高度不适应bug的)——平心而论,我们努力的要避开margin collapsing多少也有些违背了W3C的初衷。不过,由于ie下经常有意无意的会触发haslayout,从而会避开margin叠加,这使得浏览 器间显示不一。因此,我们还是有理由在适当时候彻底避开margin叠加的。
那么,如何避免这种margin叠加现象呢?

从《斯芬克斯——ie私有属性haslayout》那篇文章中,我们知道,ie下触发haslayout可以避开margin叠加。那么其他浏览器呢?

我们先看一下另两种解决方法。
方法一:在父级内部的添加上、下两个空元素。
有些教科书上将这种方法称为完美的解决方法。但实际当中我们一般不会使用,因为这种方法不仅要多加两个无意义元素标签,对这两个元素还要特别设置CSS使其高度为0。):
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<style type="text/css">
*{padding:0;margin:0;}
#wrap{background:#ccc;}
#content{background:#eee;margin:50px 0;}
</style>
</head>
<body>
<div id="wrap">
<div> </div>
<div id="content">margin:50px 0;<br />上下各添加一个额外空元素。元素只要不脱离文档流,就能在ie,ff等浏览器下避开margin-top塌陷。如果元素是脱离文档流的,只要是 触发了haslayout,在ie下也能避开塌陷。这两个元素一般要设置其高为0,而不让其增加页面的额外高度。</div>
<div> </div>
</div>
</body>
</html>
第二种,在父级上使用border属性(属性值0和none除外)。
这个方法也不大经常使用,因为在wrap上至少要设置一个1px的多余边框(上下两个就是2px),而且这条边线的颜色的颜色设置也是个问题,因为可能在wrap内部会使用背景图片(background-image),那么这条边线就无法伪装隐藏了。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<style type="text/css">
*{padding:0;margin:0;}
#wrap{background:#ccc;border:1px solid #ccc} /* border的颜色设置同background一样 */
#content{background:#eee;margin:50px 0;}
</style>
</head>
<body>
<div id="wrap">
<div id="content">margin:50px 0;</div>
</div>
</body>
</html>
最后一个方法,就利用到了ie的haslayout原理了(清除浮动也用到了这种方法)。对于ff下,在父级(wrap)上使用overflow:hidden;对于ie则触发其layout——如何触发,可以看这篇文章:on having layout。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<style type="text/css">
*{padding:0;margin:0;}
#wrap{background:#ccc;overflow:hidden;width:100%}
#content{background:#eee;margin:50px 0;}
</style>
</head>
<body>
<div id="wrap">
<div id="content">margin:50px 0;</div>
</div>
</body>
</html>
(overflow:hidden也会触发ie7中的layout。但是对之前的ie版本无效,否则倒是可以一个属性搞定)。
转自:http://hi.baidu.com/xiaminy/blog/item/d9c540d5c2cb6e0ca08bb7fa.html
分享到:
评论

相关推荐

    css中padding、margin两个重要属性的详细介绍及举例说明

    - 在某些情况下,`margin`会发生**合并**(Collapsing Margins),即两个相邻元素的`margin`会合并成一个较大的值。例如,两个元素垂直方向上的`margin`可能会合并。 #### 四、`padding`属性详解 `padding`属性用于...

    CSS中margin边界叠加问题及解决方案

    6. **使用zoom:1**:在某些情况下,为外层div添加`zoom:1`可以使元素创建一个新的块格式化上下文,从而避免margin叠加。 每种解决方案都有其适用场景,开发者应根据实际情况选择合适的方法。 总之,理解并妥善处理...

    CSS外边距叠加的问题,CSS教程

    外边距叠加(Margin Collapsing)现象是初学者和经验丰富的开发者都会遇到的问题,它描述了在特定条件下,垂直外边距会相互“叠加”,而非简单地相加。今天,我们将深入探讨这一现象及其在CSS布局中的重要性和影响。...

    CSS中的元素定位方法详解

    值得注意的是,垂直方向的外边距会发生叠加(margin collapsing),影响元素的实际间距。 5. 清除浮动clear:当需要阻止元素受到浮动元素的影响时,可以使用clear属性。clear:both或clear:left/right会让元素下方不...

    2des

    3. 双倍边距:在某些情况下,开发者可能会无意中为元素设置了双倍边距,这是因为CSS中的边距塌陷(margin collapsing)现象。为了解决这个问题,可以使用`border-box`盒模型或者设置`clearfix`类来避免边距重叠。 4...

Global site tag (gtag.js) - Google Analytics