本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
在css中,可以使用padding属性设置内边距,只需要给元素设置“padding:数值+单位|百分比数值”即可。padding属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。padding属性不允许指定负边距值。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
我们来看一下设置padding(内边距)的方法:
我们的内间距是属于css盒模型之中的一种,那么现在我们来看看内间距都是怎么设置的吧。
padding: 是一个简写属性,可以设置一个声明中的所有内边距属性。
单独使用 padding 属性可以改变上下左右的填充。
可能的值:
length:定义一个固定的填充(像素, pt, em,等)
%:使用百分比值定义一个填充
用法:
padding-left 设置对象距离左边的边距补白间隔
1 |
|
对象内距离左边补白间距为5px
padding-right 设置对象距离右边的边距补白间隔
1 |
|
对象内距离右边补白间距为5px
padding-top 设置对象距离上边的边距补白间隔
1 |
|
对象内距离上边补白间距为5px
padding-bottom 设置对象距离下边的边距补白间隔
1 |
|
对象内距离下边补白间距为5px
说明
检索或设置对象四边的补丁边距。
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
如果只提供一个,将用于全部的四条边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
内联对象要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。
Padding的值不能为负值。
实例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
效果图:
推荐学习:css视频教程
以上就是css如何设置内边距的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者