揭露CSS中margins折叠现象内幕

开发 前端
你对CSS中Margin属性的用法是否了解,这里向大家描述一下margins折叠现象产生的原因及解决方案,希望对你的学习有所帮助。

本文和大家重点讨论一下CSS中margins折叠现象,margins折叠现象只存在于临近或有从属关系的元素,垂直方向的margin中。

Margin简介

包括margin-top,margin-right,margin-bottom,margin-left,控制块级元素之间的距离,它们是透明不可见的。

Collapsingmargins:

margins折叠现象只存在于临近或有从属关系的元素,垂直方向的margin中.文字说明可能让人费解,下面用一个例子说明margin-collapsing现象.

例:在html文件的之间写入如下代码: 

  1. <dividdivid=”ID1″> 
  2. <h1idh1id=”ID2″>MarginsofID1andID2collapsevertically.<br/> 
  3. 元素ID1与ID2的margins在垂直方向折叠.h1> 
  4. div> 
  5.  

在与其外联的css文件中写入: 

  1. *{  
  2. padding:0;  
  3. margin:0;  
  4. }  
  5. #ID1{  
  6. background-color:#333;  
  7. color:#FFF;  
  8. margin-top:10px;  
  9. margin-bottom:10px;  
  10. }  
  11. #ID2{  
  12. font:normal14px/1.5Verdana,sans-serif;  
  13. margin-top:30px;  
  14. margin-bottom:30px;  
  15. border:1pxsolid#F00;  
  16. }  
  17.  

代码解释:

1.在html写入的代码表示,在html中插入id分别为ID1和ID2的两个块级元素div,h1;
2.*{padding:0;margin:0;}:使浏览器默认的元素padding和margin值均归零;
3.#ID1{…}:使id为ID1的元素div的背景颜色为#333,字体颜色为#FFF,margin-top/bottom为10px;
4.#ID2{…}:使id为ID2的元素h1的字体大小为14px,verdana字体,行高为字体高的150%,正常粗细.margin-top/bottom为30px,边框为1px宽,红色实线.

依据以上解释,我们应该得到如下效果(Fig.3):

即ID1的margin-top/bottom=ab=ef=10px;
ID2的margin-top/bottom=bc=de=30px;
但用浏览器打开html文件,却得到Example4的效果,如下图(Fig.4):

即ab=cd=30px,ID1的margin-top/bottom=10px被折叠了,而且ID1应有的margin黑色背景也一同被折叠消失了。#p#

为什么会折叠:

造成以上现象的原因是,我们在css中并没有声明id为ID1的元素div的height(高),因此它的高便被设为auto(自动)了.一旦其值被设为auto,那么浏览器就会认为它的高为子元素ID2的border-top到border-bottom之间的距离,即Fig.4中bc的长度,所以子元素ID2的margin-top/bottom(30px)就伸出到了父元素ID1之外,出现了Fig.4中ab与cd之间的空白区域.因此父元素ID1的margin-top/bottom因子元素的”红杏出墙”而被折叠消失了.

如何解决折叠问题:

可能大家最初想到的办法就是根据折叠发生的原因—auto,来解决问题.但是,在实际操作中,某些元素如div,h1,p等,我们是不可能预先知道它的高是多少的,因此在css文件中是不能常规通过声明元素的高来解决折叠问题.

我们需要在css文件中加入如下代码(红色部分): 

  1. #ID1{  
  2. background-color:#333;  
  3. color:#FFF;  
  4. margin-top:10px;  
  5. margin-bottom:10px;  
  6. padding-top:1px;  
  7. padding-bottom:1px;  
  8. }  
  9. 或是:  
  10. #ID1{  
  11. background-color:#333;  
  12. color:#FFF;  
  13. margin-top:10px;  
  14. margin-bottom:10px;  
  15. border-top:1pxsolid#333;  
  16. border-bottom:1pxsolid#333;  
  17. }  
  18.  

通过增加以上代码,便可使浏览器重新计算ID1的高,使其为子元素ID2的margin-top/bottom外缘(outertop/bottom)之间的距离,即Fig.3中be的距离.

本文来源于php爱好者http://www.phplover.cn/,原文地址:http://www.phplover.cn/post/padding-margin.html

【编辑推荐】

  1. DIV+CSS中padding和margin属性用法
  2. 实例解析CSS padding 属性用法
  3. 探究IE和Firefox下的2款HTTP调试工具用法
  4. DIV+CSS开发Xhtml网页对SEO优化的影响
  5. DIV CSS网页布局中对段落进行排版的方法


 

责任编辑:佚名 来源: phplover.cn
相关推荐

2010-08-06 13:59:00

Flex和Html交互

2010-07-30 09:42:37

Flex播放器

2010-08-16 13:21:34

外边距折叠

2010-05-14 14:53:24

MyEclipse S

2010-09-27 11:12:46

MyEclipseJVM内存

2010-08-30 14:47:47

CSS选择器

2024-04-30 08:32:18

CSS元素网格

2023-12-06 08:46:20

CSSFlex内幕

2009-04-30 09:45:03

Oracle索引限制

2011-02-28 10:27:41

Visual Stud

2023-02-20 09:48:00

CSS浮动布局

2011-04-07 15:37:48

MySQL忽略用户

2013-12-16 15:04:51

多核编程

2010-05-27 10:02:14

周鸿祎王欣

2012-12-04 10:52:03

CSS3Web

2022-08-29 14:30:55

学术Nature

2012-09-21 10:12:24

SaaS厂商SLA评估SaaS应用

2013-03-26 11:12:37

金融行业木马攻击赛门铁克

2016-12-14 14:29:30

Java动态绑定机制

2021-06-06 06:05:11

APP手机诈骗软件
点赞
收藏

51CTO技术栈公众号