如何使用 CSS 在元素内设置内边距？

在 CSS 中，我们可以使用 padding 属性设置元素的内边距。padding 属性定义了元素内边距区域与元素内容之间的空白区域，通常被用来控制元素的大小和布局。

padding 属性

padding 属性的语法：padding: top right bottom left;

其中，各值分别表示元素内边距区域顶部、右侧、底部和左侧的大小。可以使用以下单位进行设置：

• px：像素；
• em：相对于父元素的字体大小；
• rem：相对于根元素的字体大小；
• %：相对于父元素的宽度；
• auto：自动计算。

当省略某一方向的值时，padding 属性会从相邻的值中继承其值。

以下代码示例展示了如何使用 padding 属性设置元素的内边距：

/* 设置元素上下左右内边距均为 10 像素 */
div {
    padding: 10px;
}

/* 设置元素上下内边距为 10 像素，左右内边距为 20 像素 */
div {
    padding: 10px 20px;
}

/* 设置元素上内边距为 5 像素，右侧内边距为 15 像素，下内边距为 10 像素，左内边距为 20 像素 */
div {
    padding: 5px 15px 10px 20px;
}

/* 继承上边内边距，右、下、左内边距均为 20 像素 */
p {
    padding-top: 10px;
    padding: inherit 20px;
}

/* 继承上、下内边距，左、右内边距为自动计算 */
p {
    padding: 10px inherit;
    padding-left: auto;
    padding-right: auto;
}

总结

使用 CSS 的 padding 属性可以方便地设置元素的内边距，从而控制元素的大小和布局。熟练掌握 padding 属性可以为网页设计提供更多的布局方案。