CSS中Padding与Margin的概念、作用及示例咨询

一、Padding（内边距） #

定义 #

Padding是元素内容区域和边框之间的空白空间，属于元素本身的一部分，会直接影响元素的整体尺寸（除非设置了box-sizing: border-box）。

工作机制 #

• 作用在元素边框内部，会把内容往元素中心挤压；默认content-box盒模型下，元素总宽/高 = 设置的宽/高 + 对应方向padding + 对应方向边框宽度。
• 支持单独设置上、右、下、左四个方向的值，也能用简写语法一次性配置多个方向。
• 元素的背景色会完全覆盖padding区域。

示例代码 #

基础用法：

.content-box {
  width: 200px;
  height: 100px;
  padding: 20px; /* 四个方向统一设置20px内边距 */
  background: #f5f5f5;
  border: 1px solid #ddd;
}

这个盒子实际宽度为 200 + 20*2 + 1*2 = 242px，高度为 100 + 20*2 + 1*2 = 142px，内容会被内边距推到中间区域。

单独设置方向：

.content-box {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
  /* 简写等价于 padding: 10px 15px; */
}

二、Margin（外边距） #

定义 #

Margin是元素边框外部、与其他元素之间的空白空间，不属于元素自身，主要用来控制元素间的间距，调整元素在页面中的位置。

工作机制 #

• 作用在元素边框外部，不会改变元素自身尺寸，但会影响元素与相邻元素的距离，以及元素在父容器中的定位。
• 支持四个方向的单独设置和简写语法。
• 存在垂直外边距折叠特性：垂直相邻的两个元素都设置margin时，间距取两者中的较大值而非相加；父元素与第一个/最后一个子元素的垂直margin也可能发生折叠。

示例代码 #

基础间距设置：

.card {
  width: 200px;
  height: 100px;
  margin: 20px; /* 四个方向统一设置20px外边距 */
  background: #f5f5f5;
  border: 1px solid #ddd;
}

这个盒子会和周围元素保持20px间距，自身含边框的尺寸仍为202px × 102px。

垂直外边距折叠示例：

.card-top {
  margin-bottom: 30px;
}
.card-bottom {
  margin-top: 20px;
}

此时两个盒子的实际间距是30px，而非50px，因为垂直方向的外边距发生了折叠。

内容的提问来源于stack exchange，提问作者Mugunthan