CSS扫盲(一): padding
说是扫盲文章, 其实我自己就是个被扫对象, 为了学习W3C标准地设计网页, 想到写这个系列的文章当作自己的学习笔记, 不求每篇都写很好, 只求能日积月累, 今天第一篇, 只记一下CSS中的padding.
padding作用很简单也很强大, 它用来定义某元素的内容与边界之间的距离, 它的4个属性分别为top(眉), right(右), bottom(脚), left(左). 距离的单位可以是cm(厘米), px(像素)或者%(相当于封闭高度或宽度的百分比), 距离设为负数是无效的.
对h1的padding属性进行定义的时候可以这样写:
眉留10像素, 左不留空, 脚留10像素, 右不留空
也可以单独对某一属性定义, 如:
只在眉留10像素
4个方向都各留10像素的距离
眉和脚各留10像素, 左右各留宽度的2%
眉留10像素, 左右各留宽度的2%, 脚留15像素
眉留10像素, 右留宽度的2%, 脚留15像素, 左留20像素
大家可以试一下. 有错误的地方欢迎指正.
引用内容1
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属性进行定义的时候可以这样写:
程序代码1
h1 {padding: 10px 0px 10px 0px}眉留10像素, 左不留空, 脚留10像素, 右不留空
也可以单独对某一属性定义, 如:
程序代码2
h1 {padding-top: 10px}只在眉留10像素
程序代码3
h1 {padding: 10px}4个方向都各留10像素的距离
程序代码4
h1 {padding: 10px 2%}眉和脚各留10像素, 左右各留宽度的2%
程序代码5
h1 {padding: 10px 2% 15px}眉留10像素, 左右各留宽度的2%, 脚留15像素
程序代码6
h1 {padding: 10px 2% 15px 20px}眉留10像素, 右留宽度的2%, 脚留15像素, 左留20像素
大家可以试一下. 有错误的地方欢迎指正.
热门文章