margin是元素周围的空间。
┌──────────────────────┐ ┌──────────────────────┐
| | | |
| | | |
| Element |◀︎── margin ──▶︎| Element |
| | | |
| | | |
└──────────────────────┘ └──────────────────────┘而 padding 是元素与其内部内容之间的空间。margin 和 padding 都不包括元素的 border。
┌─────────────▲─────────────┐
| | Padding |
| | |
| ┌─────▼─────┐ |
| | | |
|◀︎────▶︎| Content |◀︎────▶︎| ◀︎── Element
| | | |
| | | |
| └─────▲─────┘ |
| | |
| | |
└─────────────▼─────────────┘- 上下边距是可重叠的。
让我们考虑一个例子，我们有两个元素 A 和 B。A 元素在底部有 30px 的空间，而 B 在顶部有 20px 的空间。
最后，两个元素之间的边距是两个边距值的最大数，即 30px，而不是它们的总和。
┌───────────────────────────┐
| |
| A |
| |
└───────┬───────▲───────────┘
| |
| |
| |
| |
margin | | margin
bottom | | top
| |
| |
| |
┌───────▼───────┴───────────┐
| |
| B |
| |
└───────────────────────────┘左、右边距和任何 padding 值都不会出现这种情况。
我们经常使用 margin: auto 使元素居中。
margin 可以是任何浮点数，但 padding 不能是负数。
div {
margin: -10px;
/* ❌ */
padding: -15px;
}