CSS 内边距padding的简写设置方法
内边距
什么是CSS的内边距?即HTML元素的内容区到元素边界之间的距离,比如下方的这个图示中,文字到各边框的距离(注意右边距为什么那么大?下方的实例将给出相应的解释),其中边框不是一定需要的,这里只是为了更清晰地展示内边距而特意设置的。在CSS中,可以通过padding属性来为HTML的元素设置内边距。
内边距展示
padding设置内边距的语法
使用padding设置内边距一般为简写的形式:
- padding:value;用一个值设置相等的上下左右内边距
- padding:value1 value2;两个值的方式,value1表示上下内边距,value2表示左右内边距
- padding:value1 value2 value3;value1表示上内边距,value2表示左右内边距,value3表示下内边距
- padding:value1 value2 value3 value4;分别设置元素的上下左右内边距
padding属性值
值 | 描述 |
---|---|
len | 长度值,单位为px、pt、cm等 |
百分比 | 单位为%,长度是相对于元素宽度的百分比 |
inherit | 从父元素继承内边距属性 |
提示:padding不允许负值
padding实例代码,及在线编辑器
<p class='p1'>内容一</p>
<p class='p2'>内容二</p>
<p class='p3'>内容三</p>
<style>
.p1{padding:10%;}
.p2{padding:20px;border:1px solid blue;}
.p3{border:1px solid skyblue;}
</style>
实例代码解析
如上代码,通过内容一和内容二的CSS样式对比可以发现,内容一的p元素并没有设置边框,但这丝毫不影响该元素的内边距padding元素的设置。
回到上面开始的时候提到的内容二的右内边距为什么会那么大,不是明明只设置了20px吗?接下来的内容纯粹是个人理解,不保证正确性,仅供参考:内容三的p元素只设置了一个边框,而且没有设置width宽度,可是变宽的宽度默认得跟容器(父元素——扣除父元素的内边距)的宽度相同,因此内容二的宽度不管有没有设置padding,都是跟父元素的相同,也就是说,其内容到右边框的实际距离——内边距远比设置的20px要大很多,因此实际的内边距将其覆盖了。注意,padding设置的是内边距,不是position那样设置的是位置,二者不能等同理解。
可以在上面的在线编辑器中,增加内容二的文本内容,要足够多,一行写满,大到“实际的内边距”比设置的数值“小”,然后运行看看,右内边距的效果就出来了。