CSS扫盲(一): padding

是扫盲文章, 其实我自己就是个被扫对象, 为了学习W3C标准地设计网页, 想到写这个系列的文章当作自己的学习笔记, 不求每篇都写很好, 只求能日积月累, 今天第一篇, 只记一下CSS中的padding.

The CSS padding properties define the space between the element border and the element content.

padding作用很简单也很强大, 它用来定义某元素的内容与边界之间的距离, 它的4个属性分别为top(眉), right(右), bottom(脚), left(左). 距离的单位可以是cm(厘米), px(像素)或者％(相当于封闭高度或宽度的百分比), 距离设为负数是无效的.

对h1的padding属性进行定义的时候可以这样写:

CSS:

• h1 {padding: 10px 0px 10px 0px}
  
  
  眉留10像素, 左不留空, 脚留10像素, 右不留空
  也可以单独对某一属性定义, 如:
  
  CSS:

• h1 {padding-top: 10px}
  
  
  只在眉留10像素
  
  CSS:

• h1 {padding: 10px}
  
  
  4个方向都各留10像素的距离
  
  CSS:

• h1 {padding: 10px 2％}
  
  
  眉和脚各留10像素, 左右各留宽度的2％
  
  CSS:

• h1 {padding: 10px 2％ 15px}
  
  
  眉留10像素, 左右各留宽度的2％, 脚留15像素
  
  CSS:

• h1 {padding: 10px 2％ 15px 20px}
  
  
  眉留10像素, 右留宽度的2％, 脚留15像素, 左留20像素
  大家可以试一下. 有错误的地方欢迎指正.