space padding margin 边距

想象您有一个珍贵的物品放在展示柜里。为了防止展示柜被触碰或撞倒，您可能会围绕它设置一道隔离绳。这样做，您就在展示柜的外围增加了“边距”。

现在，柜子很安全了，您希望通过在柜内左右调整，使物品摆放得更加合理。您还发现如果物品放在底座上看起来会更好。通过这样做，您就在调整物品内部的“填充”。

您可能会问：我不能只使用间隔器小工具吗？

虽然可以使用间隔器小工具，但这会创建额外的分隔符和代码。在可能的情况下，使用边距和填充来实现您的目标是最佳实践。

About Margins and Padding

关于边距和填充

边距（Margin）

• 边距控制元素“外部”的空间量。边距用于在容器中上下以及左右移动元素。每个元素的边距大小都可以单独更改。在创建间隙时，边距将相邻元素推开。

负边距

• 在某些情况下，结合 z-index 使用负边距，以便“叠加”元素。

Negative Margins on Sections and Columns

A negative margin can be used in combination with z-index elements to overlap sections visually. In this example, the lower section is being moved up to cover the background of the above. A top margin of -6% is entered in the top value field.

 

 

Padding

填充（Padding）

• 填充控制容器“内部”的空间量。它是元素与其内部相关内容之间的空间，并且展示了元素周围容器的背景。

填充在区块和列中的使用

在区块和列中使用填充，让您的元素“有呼吸的空间”。例如，在区块中添加 5% 的顶部和底部填充，右列应用 5% 的左侧填充。这为用户提供了更多的“白色空间”，视觉上更具吸引力。

 

Locating the Margins and Paddings settings

定位边距和填充设置

• 高级选项卡
  • 您可以在高级选项卡中找到元素的通用边距和填充设置。
• 样式选项卡
  • 一些小工具可能在样式选项卡中有额外的边距和填充设置，例如按钮和表单。
• 站点设置
  • 您还可以在站点设置中找到边距和填充的设置，这些将被用作默认设置。样式选项卡中的设置将覆盖这些设置。

You may find the general paddings and margins settings of an element in the Advanced Tab.

Locating Additional Padding Settings

Style Tab

Some widgets may have additional Style Tab settings that use paddings and margins such as buttons and forms.

Site Settings

You may also find settings for margins and paddings in your Site Settings. These will be used as the default settings. Settings used in the Style Tab will override these settings.

Using Margins and Padding

使用边距和填充

• 边距和填充值可以设置为 PX（像素）、EM、%（百分比）或 REM。点击链式图标以解除链接，可单独更改值。
• TRouBLe规则
  • 边距和填充值的顺序是上、右、下、左。例如，您可能会看到 CSS 类使用 10px, 25px, 10px, 25px，这表明它在顶部和底部有 10px 的填充，在左右有 25px 的填充。可以通过记住缩写“TRouBLe”来轻松记忆这一点。