> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 用 Margin 和 Padding 控制间距

> 调整 margin 和 padding 控制间距，提升可读性，做出整洁有序的落地页布局。

Spacing 区域控制**元素周围和内部的留白**，帮你做出整洁的布局和合理的内容间隔。

选中任意元素后，在**右侧面板**中就能找到它。

## 在哪里找

1. 在画布上选中一个元素
2. 打开**右侧面板**
3. 向下滚动到 **Spacing** 区域

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/spacing.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=2de2e4ae08c84d93f1d5f5ca557c81cd" alt="右侧面板中的 Spacing 设置" width="1306" height="988" data-path="images/spacing.png" />
</Frame>

## Margin 和 Padding 的区别

### Margin（外边距）

* 控制元素**外部**的空间
* 把元素从其他元素旁边推开

### Padding（内边距）

* 控制元素**内部**的空间
* 在内容和元素边缘之间加上留白

## 如何调整间距

每个方向都可以单独控制：

* 上
* 下
* 左
* 右

四个方向互不影响。

## 快捷控件

### + / – 按钮

* 每次增减 **5px**
* 适合快速微调布局

### 手动输入

* 点击数值即可输入自定义数字
* 也可以从快捷预设中选择：
  * 0
  * 10
  * 20
  * 40
  * 60
  * 100
  * 140

### Auto 选项

* 让系统自动处理间距，主要用于对齐

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/Screenshot2026-03-25at10.25.43AM.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=2b3771da97501a466738d7952afc4702" alt="间距字段的快捷预设和 Auto 选项" width="342" height="350" data-path="images/Screenshot2026-03-25at10.25.43AM.png" />
</Frame>

## 工作方式（示例）

* Margin Top 为 `20px`<br />👉 在元素上方增加留白
* Padding Left 为 `10px`<br />👉 把内部内容从左边缘推开

## 最佳实践

* 用 **margin** 分隔元素
* 用 **padding** 改善元素内部的可读性
* 别留白过头，保持布局平衡
* 用 + / – 快速调整，比凭感觉填数字更可靠


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.