实例解析CSS中padding、margin属性用法

开发 前端
本文将讲述HTML和CSS的关键—盒子模型(Boxmodel).理解Boxmodel的关键便是margin和padding属性,而正确理解这两个属性也是学习用CSS布局的关键.

你对CSS中padding、margin两个重要属性的用法是否了解,这里和大家分享一下,CSS中margin属性包括margin-top,margin-right,margin-bottom,margin-left,控制块级元素之间的距离,它们是透明不可见的,而Padding属性包括padding-top,padding-right,padding-bottom,padding-left,控制块级元素内部。

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

本文将讲述HTML和CSS的关键—盒子模型(Boxmodel).理解Boxmodel的关键便是margin和padding属性,而正确理解这两个属性也是学习用CSS布局的关键.

注:为什么不翻译margin和padding?原因一,在汉语中并没有与之相对应的词语;原因二:即使有这样的词语,由于在编写CSS代码时,必须使用margin和padding,如果我们总用汉语词语代替其来解释的话,到了实际应用时容易混淆margin和padding的概念.

如果有一点Html基础的话,就应该了解一些基本元素(Element),如p,h1~h6,br,div,li,ul,img等.如果将这些元素细分,又可以分别归为顶级(top-level)元素,块级(block-level)元素和内联(inline)元素.

1.Block-levelelement:指能够独立存在,一般的块级元素之间以换行(如一个段落结束后另起一行)分隔.常用的块级元素包括:p,h1~h6,div,ul等;

2.Inlineelement:指依附其他块级元素存在,紧接于被联元素之间显示,而不换行.常用的内联元素包括:img,span,li,br等;

3.Top-levelelement:包括html,body,frameset,表现如Block-levelelement,属于高级块级元素.

块级元素是构成一个html的主要和关键元素,而任意一个块级元素均可以用Boxmodel来解释说明.

BoxModel:任意一个块级元素均由content(内容),padding,background(包括背景颜色和图片),border(边框),margin五个部分组成.立体图如下(Fig.1):


平面图如下(Fig.2):

根据以上两图,相信大家对于Boxmodel会有个直观的认识.#p#

以下说明margin和padding属性:

1.Margin:

包括margin-top,margin-right,margin-bottom,margin-left,控制块级元素之间的距离,它们是透明不可见的,对于Fig.2所示的上右下左margin值均为40px,因此代码为:

  1. margin-top:40px;  
  2. margin-right:40px;  
  3. margin-bottom:40px;  
  4. margin-left:40px;  
  5.  

根据上,右,下,左的顺时针规则,简写为

  1. margin:40px40px40px40px;  
  2.  

为便于记忆,请参考下图:

当上下,左右margin值分别一致,可简写为:

  1. margin:40px40px;  
  2.  

前一个40px代表上下margin值,后一个40px代表左右margin值.

当上下左右margin值均一致,可简写为:

  1. margin:40px;  
  2.  

#p#2.Padding:

包括padding-top,padding-right,padding-bottom,padding-left,控制块级元素内部,content与border之间的距离,其代码,简写请参考margin属性的写法.

至此,我们已经基本了解margin和padding属性的基本用法.但是,在实际应用中,却总是发生一些让你琢磨不透的事,而它们又或多或少的与margin有关.

注:当你想让两个元素的content在垂直方向(vertically)分隔时,既可以选择padding-top/bottom,也可以选择margin-top/bottom,再此Jorux建议你尽量使用padding-top/bottom来达到你的目的,这是因为CSS中存在Collapsingmargins(折叠的margins)的现象。Collapsingmargins:margins折叠现象只存在于临近或有从属关系的元素,垂直方向的margin中.文字说明可能让人费解,下面用一个例子说明margin-collapsing现象.

例:在html文件的<body></body>之间写入如下代码:

  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黑色背景也一同被折叠消失了.

为什么会折叠:造成以上现象的原因是,我们在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因子元素的”红杏出墙”而被折叠消失了.#p#

如何解决折叠问题:

可能大家最初想到的办法就是根据折叠发生的原因—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.  

 或是:

  1. #ID1{  
  2. background-color:#333;  
  3. color:#FFF;  
  4. margin-top:10px;  
  5. margin-bottom:10px;  
  6. border-top:1pxsolid#333;  
  7. border-bottom:1pxsolid#333;  
  8. }  
  9.  

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

原文地址http://www.cncfan.com/cncfan_com_article.asp?art_id=6215&cat_id=56

【编辑推荐】

  1. CSS中margin:0auto;无法居中解决方法
  2. CSS Sprites图片切割术与图片优化
  3. CSS中DIV弹出层问题解决方案
  4. CSS外边距设置属性margin用法
  5. CSS分栏布局的两种方法:绝对定位和浮动

 

责任编辑:佚名 来源: cncfan.com
相关推荐

2010-08-19 11:22:19

marginpadding

2010-08-20 14:58:26

CSSpadding

2010-08-25 08:57:33

marginpadding

2010-08-19 11:32:10

CSSpaddingmargin

2010-08-23 15:51:54

paddingmargin

2010-08-19 12:55:55

CSSMarginPadding

2010-08-23 09:16:21

CSSpadding-bot

2010-08-23 11:16:25

padding-lef

2010-08-23 09:01:45

MarginPadding

2010-08-24 13:14:36

CSSmargin

2010-08-25 11:05:03

CSSpaddingmargin

2010-09-16 10:57:15

paddingmarginCSS

2010-08-24 08:56:22

CSSpadding

2010-09-03 10:31:31

CSSmargin

2010-08-23 13:40:46

CSSpadding-bot

2010-08-27 11:10:30

CSSmargin

2010-09-03 10:43:05

CSSmargin

2010-08-25 13:33:55

CSSpadding

2010-08-25 10:21:49

CSSmargin

2010-08-23 15:33:47

CSSpadding
点赞
收藏

51CTO技术栈公众号