CSS扫盲(一): padding
说是扫盲文章, 其实我自己就是个被扫对象, 为了学习W3C标准地设计网页, 想到写这个系列的文章当作自己的学习笔记, 不求每篇都写很好, 只求能日积月累, 今天第一篇, 只记一下CSS中的padding.
The CSS padding properties define the space between the element border and the element content. [via]
padding作用很简单也很强大, 它用来定义某元素的内容与边界之间的距离, 它的4个属性分别为top(眉), right(右), bottom(脚), left(左). 距离的单位可以是cm(厘米), px(像素)或者%(相当于封闭高度或宽度的百分比), 距离设为负数是无效的.
对h1的padding属性进行定义的时候可以这样写:
h1 {padding: 10px 0px 10px 0px}
/* 0px 可以简化写为 0 */
/* 0px 可以简化写为 0 */
眉留10像素, 右不留空, 脚留10像素, 左不留空
也可以单独对某一属性定义, 如:
h1 {padding-top: 10px}
只在眉留10像素
h1 {padding: 10px}
4个方向都各留10像素的距离
h1 {padding: 10px 2%}
眉和脚各留10像素, 左右各留宽度的2%
h1 {padding: 10px 2% 15px}
眉留10像素, 左右各留宽度的2%, 脚留15像素
h1 {padding: 10px 2% 15px 20px}
眉留10像素, 右留宽度的2%, 脚留15像素, 左留20像素
大家可以试一下. 有错误的地方欢迎指正. 
ptz 2007年05月18日 14:31 ₪
长见识。你做的这个代码还有那表格都很漂亮啊，怎么做的啊
北极冰仔 2007年05月18日 14:37 ₪
ptz:
使用了一个叫CoolCode的插件, 不过貌似是基于另个插件修改的, 原始的插件叫什么不清楚.
yichi 2007年05月24日 01:46 ₪
不错不错，期待下文。喜欢这样的基础教程 :em21:
北极冰仔 2007年05月24日 14:27 ₪
很是郁闷的, 这几天实验室的网络封掉了, 上网都不方便, 不过我会想办法继续CSS学习笔记的, 谢谢yichi支持! :em50:
scavin 2008年01月18日 10:40 ₪
占座，要收藏整个系列
scavin’s last blog post..更改开始菜单上的”开始”
kend 2008年01月20日 16:57 ₪
学习了。
第一个例子的‘眉留10像素, 左不留空, 脚留10像素, 右不留空’是不是应该写成‘眉留10像素, 右不留空, 脚留10像素, 左不留空’。虽然右到左是顺序。
北极冰仔 2008年01月20日 20:01 ₪
kend » 你说的很有道理。^_^
SeanCHEN 2008年02月29日 20:50 ₪
我来报名啦~~~多多赐教啊
虽然刚刚做个网站，主题也是自己弄得。但是总觉得在css上有太多盲点。要好好学习学习。
提个小问题:padding的大小是不是并不包含在width设定值里面？
比如我先设定了width:200px;在设定padding:10px;拿着个框的宽度就会变成220px？
SeanCHEN’s last blog post..用div+css实现圆角边框