CSS 内边距

CSS 内边距 (Padding)

CSS 的 padding 属性用于在元素内部，内容与边框之间创建空间。内边距会增加元素的可见尺寸。

理解内边距 (Padding)

内边距在元素的边界内，围绕内容清出一个区域。应用于元素的任何背景颜色或图像都会延伸到内边距区域。

可以把它想象成画框里照片周围的衬边：内边距是衬边，内容是照片，边框是画框。

你可以单独控制四条边的内边距，或使用一个缩写属性 (shorthand property)。

内边距 (Padding) 值

内边距可以使用各种单位指定：

值类型	描述
length	使用 px、em、rem 等单位定义固定内边距。示例：padding: 10px;
%	定义内边距为相对于包含块 (containing block) 宽度的百分比。示例：padding: 5%;

注意：百分比内边距（即使是 padding-top 和 padding-bottom）是根据包含块的宽度计算的，这有时可能与直觉不符。

单独的内边距 (Padding) 属性

你可以分别设置每条边的内边距：

• padding-top
• padding-right
• padding-bottom
• padding-left

示例：

.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border: 1px solid black;
  background-color: lightyellow;
}

内边距 (Padding) 缩写属性 (Shorthand Property)

padding 属性是一个缩写属性 (shorthand property)，允许你在一个声明中设置所有四条边的内边距。它可以接受一个、两个、三个或四个值：

• 一个值： padding: 10px; （将 10px 内边距应用于所有四条边）
• 两个值： padding: 10px 20px; （第一个值应用于顶部和底部，第二个值应用于左侧和右侧）
• 三个值： padding: 10px 20px 5px; （第一个值用于顶部，第二个值用于左侧和右侧，第三个值用于底部）
• 四个值： padding: 10px 20px 5px 15px; （按顺时针顺序应用：顶部、右侧、底部、左侧）

使用两个值的示例：

.button {
  /* 顶部/底部 5px 内边距，左侧/右侧 15px 内边距 */
  padding: 5px 15px;
  border: 1px solid gray;
  background-color: lightblue;
  display: inline-block; /* 为了使内边距可见 */
}

使用四个值的示例：

.content-area {
  /* 顶部 10px, 右侧 20px, 底部 30px, 左侧 40px */
  padding: 10px 20px 30px 40px;
  border: 1px solid green;
}

内边距 (Padding) 和盒模型 (Box Model)

请记住，内边距会增加元素占用的总空间。这如何影响计算出的 width 和 height 取决于 box-sizing 属性。

• box-sizing: content-box（默认）：内边距添加在指定的 width 和 height 外部。
• box-sizing: border-box：内边距包含在指定的 width 和 height 之内（内容区域会缩小）。

在使用内边距时，通常建议使用 box-sizing: border-box; 以获得更可预测的布局。

所有 CSS 内边距 (Padding) 属性

属性	描述
padding	用于设置所有四个内边距属性的缩写属性。
padding-top	设置顶部内边距。
padding-right	设置右侧内边距。
padding-bottom	设置底部内边距。
padding-left	设置左侧内边距。