`
plassey
  • 浏览: 6151 次
  • 性别: 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
分享到:
评论

相关推荐

    Firefox下margin-top会出错

    这种现象被称为“margin折叠”(collapsing margins)。 #### 二、`margin` 折叠的概念 所谓`margin`折叠,指的是两个或多个盒子模型之间的相邻`margin`属性结合为一个单独的`margin`。具体来说,在CSS2.1规范中,...

    DIV多层嵌套margin-top的BUG问题

    这个现象实际上是由于浏览器之间的差异性,尤其是外边距折叠(Margin Collapsing)规则的实现不同。在标准的CSS规范中,相邻的块级元素的外边距可能会被合并,但当一个元素内部的子元素与其有`margin-top`时,这个...

    firefox margin-top失效的原因与解决办法

    首先,需要了解的是CSS中的“折叠margin”(collapsing margins)现象。所谓折叠margin,是指两个或多个垂直相邻的块级元素(包括它们的子元素)的margin值可能会“折叠”成一个单一的margin值。例如,在常规文档流中...

    父元素与子元素之间的margin-top问题(css hack)

    在CSS布局中,当给子元素设置`margin-top`时,有时会发现父元素的顶部位置也受到了影响,出现所谓的“margin collapsing”现象。这个问题在前端开发中比较常见,尤其在设计复杂的页面布局时,如果不了解这个特性,...

    CSS的margin和padding

    垂直外边距合并(Margin collapsing)是一个CSS布局中的特性,当两个或多个相邻的垂直外边距相遇时,它们会合并为其中的最大值。这在处理元素间距时可能会带来意外的结果。例如,当一个元素的第一个子元素具有`...

    css中margin属性详细分析.docx

    垂直外边距合并(Margin Collapsing)是CSS布局中一个特殊的规则。当两个相邻的垂直外边距相遇时,它们会合并为较大的那个值,而不是简单地相加。这个问题在处理元素间的间距时尤其需要注意,比如在布局中,第一个子...

    css的margin collapsing导致最上面会出现一个横条

    在CSS布局中,"margin collapsing"(边界合并)是一个常见的现象,它会导致元素之间的间距出现意外的合并,从而影响页面的视觉效果。这个问题在本文中通过一个实际的例子进行了阐述,即在网页顶部出现了一条与HTML...

    CSS深入学习之让你认识不一样的margin

    文章详细讨论了margin重叠(collapsing margins)的问题。margin重叠通常发生在相邻的块级元素之间,此时,两个元素的垂直间距不是它们各自的margin之和,而是两个margin中较大的那一个。为了避免这种现象,可以对...

    IE7、IE8、ff下的margin-top问题 折叠margin

    “collapsing margins”(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容、padding区域、border边框或使用清除分离方法)结合表示为一个单独的margin。...

    CSS重要属性之 margin 属性知识大整合(必看篇)

    margin属性实际上是一个缩写属性,包括了上、右、下、左边距(margin-top, margin-right, margin-bottom, margin-left)。开发者可以为每个方向单独设置边距,也可以使用简写形式一次性设置多个方向的边距值。 ...

    react-native-collapsing-header:使用NativeDriver的react-native-collapsing-header

    react-native-collapsing-header 用法 npm install-保存react-native-collapsing-header 或者 纱线添加React本领折叠头 import CollapsingHeader from 'react-native-collapsing-header' ; import Text from 'react...

    css中margin属性详细分析 (2).pdf

    它可以单独设置每个方向的值,如`margin-top`、`margin-right`、`margin-bottom`和`margin-left`,也可以使用简写形式`margin`一次性设置所有方向的外边距。例如,`margin: 10px 20px 30px 40px;`表示上边距10px,...

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

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

    react-native-collapsing-toolbar:Android CollapsingToolbarLayout的react-native包装器

    react-native-collapsing-工具栏react-native包装器,易于与Animated.Event和FlatList集成。入门确保同时安装react-native-collapsing-toolbar和react-native-nested-scroll-view 。 $ npm install react-native-...

    使用HTML开发商业网站-块元素垂直外边距的合并课件.pptx

    这种行为在CSS规范中被称为"外边距折叠"(Margin Collapsing)。例如,如果你有一个元素的`margin-bottom`是20px,紧接着的另一个元素的`margin-top`是30px,那么这两个元素之间的实际间距将会是30px,而不是50px。 ...

    3D打印伸缩剑COLLAPSING-KATANA.stl

    3D打印伸缩剑COLLAPSING-KATANA.stl

    详解css外边距折叠(margin collapsing)

    前文 这是的一个经典的老问题,因为之前刚好有读者朋友问到,顺便整理一下。...看这个例子中的两个p标签,根据样式定义:第一个p的margin-bottom和第二个p的margin-top 都是10px,那实际距离应该等于20p

    请不要告诉我你懂css margin

    在CSS中,存在一种被称为“外边距折叠”(Margin Collapsing)的现象,主要体现在垂直方向。当两个相邻的块级元素的顶部或底部外边距相遇时,它们会合并成一个更大的外边距,取两者中的最大值。这一特性在处理列表、...

    collapsing-console-sections-1.0-sources.jar

    jar包,官方版本,自测可用

    collapsing-console-sections-1.1.jar

    jar包,官方版本,自测可用

Global site tag (gtag.js) - Google Analytics