# 间距控制

URL: https://caijiao.org/css/03-text-font/05-spacing
Source: docs/css/03-text-font/05-spacing.md
Description: 间距控制是布局设计的重要部分，包括外边距（margin）和内边距（padding），用于调整元素之间和内容与边框之间的距离。

在网页布局中，合理控制元素间的间距能使页面更加整洁美观。CSS 提供了 `margin` 和 `padding` 两个属性来分别设置外边距和内边距。

## 1. 外边距（margin）

控制元素与其他元素之间的距离。可以分别设置四个方向的外边距：

```css
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
````

简写形式：

```css
margin: 10px 15px; /* 上下10px，左右15px */
margin: 10px 15px 5px 20px; /* 上 右 下 左 */
```

## 2. 内边距（padding）

控制元素内容与元素边框之间的距离，也支持四个方向分别设置：

```css
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
```

简写形式：

```css
padding: 5px 10px; /* 上下5px，左右10px */
padding: 5px 10px 8px 12px; /* 上 右 下 左 */
```

## 3. 负值和百分比

* `margin` 可以使用负值，缩小元素间距。
* `padding` 不支持负值。
* 两者均支持百分比，但百分比是相对于包含块的宽度计算。

## 示例

```css
.box {
  margin: 20px auto;    /* 上下20px，左右自动居中 */
  padding: 15px 10px;   /* 上下15px，左右10px内边距 */
  border: 1px solid #ccc;
}
```

合理使用间距控制，可以让布局更加美观且易于维护。