CSS中margin和padding属性的用法

开发 前端
你对CSS中margin和padding属性的用法是否了解,margin和padding属性用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边。

本文向大家介绍一下CSS中margin和padding属性的用法,margin是指层的边框以外留的空白,padding是指层的边框到层的内容之间的空白。

margin和padding属性

margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边。margin是指层的边框以外留的空白,用于页边距或者与其它层制造一个间距。”10px10px10px10px”分别代表”上右下左”(顺时针方向)四个边距,如果都一样,可以缩写成”margin:10px;”。如果边距为零,要写成”margin:0px;”。注意:当值是零时,除了RGB颜色值0%必须跟百分号,其他情况后面可以不跟单位”px”。margin是透明元素,不能定义颜色。padding是指层的边框到层的内容之间的空白。和margin一样,分别指定上右下左边框到内容的距离。如果都一样,可以缩写成”padding:0px”。单独指定左边可以写成”padding-LEFT:0px;”。padding是透明元素,不能定义颜色。

例子h2:

  1. h2{  
  2. font-size:1.5em;  
  3. background-color:#ccc;  
  4. margin:1em;  
  5. padding:3em;  
  6. }  
  7.  

为什么不翻译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五个部分组成。

◆以下说明margin和padding属性:

margin:

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

  1. h2{  
  2. margin-top:40px;  
  3. margin-right:40px;  
  4. margin-bottom:40px;  
  5. margin-left:40px;  
  6. }  
  7.  

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

  1. h2{  
  2. margin:40px40px40px40px;  
  3. }  
  4.  

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

  1. h2{  
  2. margin:40px40px;  
  3. }  
  4.  

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

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

  1. h2{  
  2. margin:40px;  
  3. }  
  4.  

padding:

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

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

注:当你想让两个元素的content在垂直方向(vertically)分隔时,既可以选择padding-top/bottom,也可以选择margin-top/bottom,在此建议你尽量使用padding-top/bottom来达到你的目的,这是因为CSS中存在Collapsingmargins(折叠的margins)的现象。
 

【编辑推荐】

  1. DIV+CSS中padding和margin属性用法
  2. IE6.0对padding的解读分析
  3. DIV+CSS网页错位诊断和解决方法
  4. Float构建三栏DIV CSS网页布局
  5. 技术分享 如何使用CSS控制超链接文字样式

 

 

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

2010-08-19 11:32:10

CSSpaddingmargin

2010-08-23 15:51:54

paddingmargin

2010-09-08 11:06:49

CSSpaddingmargin

2010-08-19 12:55:55

CSSMarginPadding

2010-08-23 09:01:45

MarginPadding

2010-09-16 10:57:15

paddingmarginCSS

2010-08-19 11:22:19

marginpadding

2010-08-24 13:14:36

CSSmargin

2010-08-25 09:25:13

CSSmargin

2010-08-25 11:05:03

CSSpaddingmargin

2010-08-23 13:40:46

CSSpadding-bot

2010-08-24 08:56:22

CSSpadding

2010-08-27 11:10:30

CSSmargin

2010-09-03 10:43:05

CSSmargin

2010-08-19 13:43:07

marginpadding

2010-08-25 13:33:55

CSSpadding

2010-08-25 10:21:49

CSSmargin

2010-08-23 15:33:47

CSSpadding

2010-08-23 08:45:08

CSSpadding内边距

2010-08-23 09:16:21

CSSpadding-bot
点赞
收藏

51CTO技术栈公众号