前端必知必会-CSS填充属性padding

---

CSS 填充padding

填充padding用于在元素内容周围（任何定义的边框内）创建空间。有一些属性可用于设置元素每侧（顶部、右侧、底部和左侧）的填充。

填充padding - 各个侧面

CSS 具有用于指定元素每侧填充的属性：

• padding-top
• padding-right
• padding-bottom
• padding-left
  所有填充属性都可以具有以下值：
• length - 以 px、pt、cm 等为单位指定填充。
• % - 以包含元素宽度的 % 为单位指定填充
  i- nherit - 指定填充应从父元素继承
  注意：不允许使用负值。

示例
为 <div> 元素的所有四个边设置不同的填充：

div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

填充 - 简写属性

为了缩短代码，可以在一个属性中指定所有填充属性。

padding 属性是以下各个填充属性的简写属性：

• padding-top
• padding-right
• padding-bottom
• padding-left
  因此，它的工作原理如下：

如果 padding 属性有四个值：

padding: 25px 50px 75px 100px;

顶部内边距为 25px
右侧内边距为 50px
底部内边距为 75px
左侧内边距为 100px
示例
使用具有四个值的 padding 简写属性：

div {
padding: 25px 50px 75px 100px;
}

如果 padding 属性有三个值：

padding: 25px 50px 75px;

顶部内边距为 25px
右侧和左侧内边距为 50px
底部内边距为 75px
示例
使用具有三个值的 padding 简写属性：

div {
padding: 25px 50px 75px;
}

如果 padding 属性有两个值：

padding: 25px 50px;

顶部和底部填充为 25px
右侧和左侧填充为 50px
示例
使用 padding 简写属性，有两个值：

div {
padding: 25px 50px;
}

如果 padding 属性有一个值：

padding: 25px;

所有四个填充均为 25px
示例
使用 padding 简写属性，有一个值：

div {
padding: 25px;
}

填充padding和元素宽度

CSS width 属性指定元素内容区域的宽度。内容区域是元素的填充、边框和边距内的部分（盒模型）。

因此，如果元素具有指定的宽度，则添加到该元素的填充将添加到元素的总宽度中。这通常是不理想的结果。

示例
此处，<div> 元素的宽度为 300px。但是，<div> 元素的实际宽度将为 350px（300px + 25px 左填充 + 25px 右填充）：

div {
width: 300px;
padding: 25px;
}

要将宽度保持在 300px，无论填充量是多少，都可以使用 box-sizing 属性。这会使元素保持其实际宽度；如果增加填充，可用的内容空间将减少。

示例
使用 box-sizing 属性将宽度保持在 300px，无论填充量是多少：

div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}

---

总结

本文介绍了的CSS填充属性padding使用，如有问题欢迎私信和评论