CSS Padding(填充)属性定义元素边框与元素内容之间的空间。
一、Padding(填充)
CSS Padding (填充) 属性用于定义元素边框与元素内容之间的空间,当我们清除元素的填充时,会释放出一定的区域。这些被释放的区域将会受到元素背景颜色的填充效果。填充属性可以分别设置上、下、左、右四个方向的值,也可以使用缩写形式来一次性改变所有方向的填充,使用缩写填充属性一旦改变填充值,就会同时影响元素的上下左右填充。
二、可能的值
注意:CSS padding 属性可以使用长度值或百分比值,但与 margin 属性不同, padding 属性不允许使用负值。
三、内边距百分比数值
CSS Padding (填充) 属性中的百分比数值是相对于其父元素的宽度进行计算的。如果改变了父元素的宽度,填充属性所使用的百分比数值也会相应地进行调整。例如,如果将父元素的宽度增加或减少,填充属性中的百分比值也会相应地增加或减少,以适应新的父元素宽度。
以下是将段落的内边距设置为父元素 width 的 20% 的示例:
p {padding: 20%;}
假设一个段落的父元素是 div 元素,那么它的 padding 的 width 计算是根据 div 进行的:
实例:
<div style="width: 200px;"> <p>这个段落包含在一个宽度为200像素的DIV中。</p> </div>
注意:上下内边距与左右内边距一致,是相对于高度,而是上下内边距的百分数会相对于父元素宽度设置。
四、单边内边距属性填充
在CSS中,它可以指定不同的侧面不同的填充:
实例:
padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px;
五、简写属性填充
为了缩短代码和简化样式表,CSS 提供了一种缩写属性”padding”来同时指定所有填充属性。通过使用”padding”属性,我们可以在一个声明中同时设置上下左右四个方向的填充值。
实例:
padding:25px 50px;
Padding 属性,可以有一到四个值。
padding:25px 50px 75px 100px;
- 上填充为25px
- 右填充为50px
- 下填充为75px
- 左填充为100px
padding:25px 50px 75px;
- 上填充为25px
- 左右填充为50px
- 下填充为75px
padding:25px 50px;
- 上下填充为25px
- 左右填充为50px
padding:25px;
- 所有的填充都是25px