Margin 与 Padding 使用场景

margin 和 padding 的区别及各自适用场景

问题

margin 和 padding 分别适合什么场景使用？

解答

基本区别

.box {
  /* padding: 内边距，元素内容与边框之间的距离 */
  padding: 20px;
  
  /* margin: 外边距，元素与其他元素之间的距离 */
  margin: 20px;
}

+---------------------------+
|         margin            |
|   +-------------------+   |
|   |     h38kz        |   |
|   |   +-----------+   |   |
|   |   |  padding  |   |   |
|   |   |  +-----+  |   |   |
|   |   |  |内容 |  |   |   |
|   |   |  +-----+  |   |   |
|   |   +-----------+   |   |
|   +-------------------+   |
+---------------------------+

Padding 使用场景

/* 1. 扩大点击区域 */
.button {
  padding: 12px 24px;
  background: #007bff;
}

/* 2. 内容与边框保持距离 */
.card {
  border: 1px solid #ddd;
  padding: 16px;
}

/* 3. 背景色需要延伸的区域 */
.highlight {
  background: #fff3cd;
  padding: 8px 12px;
}

/* 4. 文字与容器边缘的间距 */
.container {
  padding: 0 20px;
}

Margin 使用场景

/* 1. 元素之间的间距 */
.paragraph {
  margin-bottom: 16px;
}

/* 2. 元素居中 */
.centered {
  width: 800px;
  margin: 0 auto;
}

/* 3. 抵消父元素的 padding */
.full-width-image {
  margin: 0 -20px;
}

/* 4. 相邻元素的间隔 */
.list-item + .list-item {
  margin-top: 8px;
}

实际对比示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 300px;
      background: #f0f0f0;
    }
    
    /* 使用 padding：背景色会延伸 */
    .padding-box {
      background: #4CAF50;
      color: white;
      padding: 20px;
    }
    
    /* 使用 margin：背景色不会延伸 */
    .margin-box {
      background: #2196F3;
      color: white;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="padding-box">Padding 区域有背景色</div>
  </div>
  
  <div class="container">
    <div class="margin-box">Margin 区域无背景色</div>
  </div>
</body>
</html>

特殊行为差异

/* margin 会折叠 */
.box1 { margin-bottom: 20px; }
.box2 { margin-top: 30px; }
/* 实际间距是 30px，不是 50px */

/* padding 不会折叠 */
.box1 { padding-bottom: 20px; }
.box2 { padding-top: 30px; }
/* 实际间距是 50px */

/* margin 可以为负值 */
.overlap {
  margin-top: -10px;
}

/* padding 不能为负值 */
.invalid {
  padding-top: -10px; /* 无效 */
}

关键点

padding 用于元素内部空间，会扩大元素尺寸，背景色会填充
margin 用于元素外部间距，不影响元素本身尺寸，背景透明
需要扩大点击区域、背景延伸时用 padding
需要元素间隔、居中对齐时用 margin
margin 有折叠特性且可为负值，padding 没有这些特性