CSS填充

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

六、所有CSS填充属性