CSS padding-bottom 属性
CSS padding-bottom 属性
CSS padding-bottom 属性用于设置一个元素底部内边距的大小。可以控制元素内容与底部边界的距离。
语法
padding-bottom: length|%|initial|inherit;
- length: 以像素、厘米、英寸为单位的数值
- %: 相对于包含块的百分比
- initial: 将属性设置为默认值
- inherit: 从父元素继承属性值
属性值
length
使用 length 值可以指定要设置的底部内边距的大小。例如，可以使用像素值（px）、厘米（cm）或英寸（in）。
padding-bottom: 20px; /* 像素 */
padding-bottom: 2cm; /* 厘米 */
padding-bottom: 0.5in; /* 英寸 */
%
使用百分比（%）的值相对于包含块的宽度来指定底部内边距的大小。
padding-bottom: 10%; /* 相对于包含块的宽度的百分比 */
initial
如果使用 initial，将会将 padding-bottom 属性设置为默认值。
padding-bottom: initial; /* 将 padding-bottom 设置为默认值 */
inherit
如果使用 inherit，padding-bottom 属性将从父元素继承。
padding-bottom: inherit; /* 从父元素继承 padding-bottom 属性值 */
实例
以下示例演示了如何使用 padding-bottom 属性：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: #f1f1f1;
padding: 20px;
margin: 20px;
border: 1px solid black;
}
.box2 {
background-color: #ddd;
padding: 10px 20px 30px 40px;
margin: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">
<p style="padding-bottom: 30px;">这是一个段落文本。</p>
</div>
<div class="box2">
<p>这是另外一个段落文本。</p>
</div>
</body>
</html>
在上面的示例中，我们定义了两个不同的盒子，并且分别在 div 元素内插入了一个段落。我们使用 padding-bottom 属性定义了这两个段落之间的不同距离。
.box 使用了一个固定的像素值（30px），同时 .box2 与另一种标记（10px 20px 30px 40px）进行了不同设置。结果就是两个盒子之间有不同高度的空白，而这之间的间距是通过 padding-bottom 属性进行调整的。
结束语
CSS padding-bottom 属性可以对元素的底部内边距进行控制，并且可以通过使用 length、%、initial 和 inherit 等值来实现不同的效果。在许多设计方案中使用 padding-bottom 属性来调整元素之间的间距是非常有用的。