用 Margin 和 Padding 控制间距

Spacing 区域控制元素周围和内部的留白，帮你做出整洁的布局和合理的内容间隔。 选中任意元素后，在右侧面板中就能找到它。

​

在哪里找

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

​

Margin 和 Padding 的区别

​

Margin（外边距）

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

​

Padding（内边距）

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

​

如何调整间距

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

• 上
• 下
• 左
• 右

四个方向互不影响。

​

快捷控件

​

+ / – 按钮

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

​

手动输入

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

​

Auto 选项

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

​

工作方式（示例）

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

​

最佳实践

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