css内边距四个方向 |html和css例子

{
padding: 上 右 下 左;
}
例如：
{
padding: 10px 20px 30px 40px;
}

当四个方向的数值不相同时，分别对应上、右、下、左四个方向的内边距大小。当两个数值时，第一个数值表示上下内边距大小，第二个数值表示左右内边距大小。当三个数值时，第一个数值表示上内边距大小，第二个数值表示左右内边距大小，第三个数值表示下内边距大小。当只有一个数值时，表示四个方向都相同的内边距大小。

{
padding: 20px; /* 四个方向的内边距都是20px */
padding: 10px 20px; /* 上下内边距是10px，左右内边距是20px */
padding: 10px 20px 30px; /* 上内边距是10px，左右内边距是20px，下内边距是30px */
padding: 10px 20px 30px 40px; /* 上、右、下、左四个方向的内边距分别是10px、20px、30px、40px */
}

除了直接在CSS中设置内边距外，大家也可以通过样式表中的类名来设置元素内边距：

p {
padding: 20px;
}
/* 或者 */
.padding {
padding: 20px;
}
<p class="padding">这是一段有内边距的文本。</p>

内边距不仅能够美化页面，还能够为元素提供更好的可读性和可访问性。在布局中，合理使用内边距可以使页面看起来更加整洁和舒适。