CSS（11）内边矩

　　上一篇文章学习了CSS的Box Model（盒子模型），在接下来的文章中，我会由内而外学习元素Box Model的中的padding、border和margin属性。

　　这一篇文章，先来学习元素内边矩（padding）：CSS padding 属性定义元素边框（border）与元素内容（element content）之间的空白区域。css padding属性的取值可以是auto（由浏览器计算内边矩的值）、以具体的单位计算的长度值（默认是0px）或百分比（基于父元素的宽度的百分比计算的内边距）。下图表示的是上一篇文章中的Box Model模型，其中的黄色区域（用红色箭头标注）就是元素的内边矩（padding）。 

一、简写属性

　　CSS padding简写属性就是在一个声明中设置一个元素的所有padding属性。由于浏览器对CSS padding 属性有值复制的规则，所以简写属性也有不同的写法。例如，设置所有 h1 元素的各边都有 10 像素的内边距，只需要这样：

/*设置所有一级标题有10px的内边矩*/
h1 {padding: 10px;}

　　我们还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：

/*使用不同的长度单位*/
h1 {padding: 10px 0.25em 2ex 20%;}

二、单边内边矩属性

　　除了使用上文中介绍的简写属性，我们也可以分别设置上内边矩（padding-top）、右内边矩（padding-right）、下内边矩（padding-bottom）和左内边距（padding-left）。　　

　　下面的规则实现的效果与上面的简写规则是完全相同的：

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

　　1.padding-top

　　padding-top 属性用于设置元素的上内边距的宽度（空间）。行内非替换元素上设置的上内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。注意，padding-top不允许指定负内边距值。

/*设置 p 元素的上内边距为2cm*/
p
  {
  padding-top:2cm;
  }

　　2.padding-right

　　padding-right属性用于设置元素的右内边距的宽度（空间）。行内非替换元素上设置的右内边距仅在元素所生成的第一个行内框的右边出现。和CSS padding-top一样，padding-right不允许指定负内边距值。

/*设置 p 元素的右内边距为2cm*/
p
  {
  padding-right:2cm;
  }

　　3.padding-bottom

　　padding-bottom 属性用于设置元素的下内边距（底部空白）。这个CSS属性的特点跟padding-top的相似。比如，下面的代码示例设置段落的底部内边矩为2cm。

/*设置 p 元素的下内边距为2cm*/
p
  {
  padding-bottom:2cm;
  }

　　4.padding-left

　　padding-left 属性用于设置元素左内边距（空白）。该属性和padding-right类似。比如，下面的例子设置段落元素拥有2px的左内边矩。 

/*设置 p 元素的左内边距为2像素*/
p
  {
  padding-left:2px;
  }

三、内边矩的百分比值

　　我们可以为元素的内边距设置百分数值，而百分数值是相对于其父元素的 width属性 计算的（这一点与外边距margin一样）。所以，如果父元素的 width 改变，它们也会改变。比如，下面这条规则把段落的内边距设置为父元素div元素 width （200px）的 10%（20px）：

View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>CSS padding test</title>
 5     <style type="text/css">
 6         p
 7         {
 8             padding: 10%;
 9         }
10     </style>
11 </head>
12 <body>
13     <div style="width: 200px;">
14         <p>
15             This paragragh is contained within a DIV that has a width of 200 pixels.</p>
16     </div>
17 </body>
18 </html>

　　 注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

　　参考：http://www.w3school.com.cn/css/css_padding.asp

posted @ 2012-09-01 23:10  YunshiSun  阅读(1296)  评论(0)  编辑  收藏  举报