在元素内外添加间距.

学习 DXPR Builder搭建页面设置元素样式

给彩色盒子内的文本留出空间，或将按钮推离其上方的段落。内边距是元素边缘内的空间；外边距是边缘外的空间。两者都在 样式 面板顶部的盒模型中设置。您的主题和新版块自带间距；本页介绍您的设置如何与之配合。

该视频给一个按钮设置了 24 px 的上外边距。

开始之前

  • 在 DXPR Builder 中打开页面；指向元素即会显示其带 More 的控制栏。初次使用构建器？请参阅您的第一页。
  • Save（对话框中）将更改保留在编辑器中。内容上方构建器工具栏上的 Save 会存储页面并显示 "Saved field"。
  • 修复单个页面上的一处间距请使用盒模型。
  • 重复出现的间距（如所有版块之间的间隙）请使用您的主题或类。
  • 遵循一套尺寸规范。当所有间距都来自少数几个尺寸时，页面看起来平静：
尺寸 用于
8 px 组内的小间距，例如图标及其标签
16 px 相关项之间
24 px 内容块之间
32 px 卡片或高亮盒子内部
48 px 版块之间

配方：按钮周围的空间

  1. 悬停在 按钮 上，点击 More，再点击 Settings。
  2. 打开 样式 面板，点击 Margin 的上边，即盒模型的外环。锁定初始为打开，因此只有这一边变化。
  3. 确认单位按钮显示 PX。在值字段中输入 24，按 Enter。该边现在显示 24px，按钮下移。
  4. 点击对话框中的 Save，再点击工具栏上的 Save。

在按钮上，外边距作用于按钮本身，因此空间从其边缘直接开始。

某按钮的样式面板，盒模型中有 24px 上 Margin，旁边是 Book a tour 按钮，上方留白，位于 Campus tours 文本下方

配方：更高的版块

新版块从 Vertical padding size 5 (py-5) 类获得上下内边距，该类优先于盒模型。请先移除该类。确认对话框标题为 Section，而非 Row 或 Column。

  1. 悬停在 版块 上，点击 More，再点击 Settings。
  2. 在 常规 面板中找到 HTML classes，点击 Vertical padding size 5 (py-5) 标签上的 ×。版块上下会失去一些空间。若没有该标签，请跳过此步。
  3. 打开 样式 面板。点击 Padding 的上边，输入 96，按 Enter。
  4. 对 Padding 的下边执行相同操作。两边现在都显示 96px，版块变高。
  5. 点击对话框中的 Save，再点击工具栏上的 Save。

某版块的样式面板，上下 Padding 为 96px，旁边是该版块，现已变高，灰色背景，文本居中

您会看到的内容

盒模型，每边内边距 32 px，下外边距 48 px，旁边是灰色 Campus tours 块，按钮在其下方 48 px 处

您设置的每一边都会在盒模型中显示其值，例如 24px。按钮下移 24 px，版块内容上下各有 96 px 的空间。

盒模型的工作原理

+----------------- Margin ------------------+
|  +-------------- Border ---------------+  |
|  |  +----------- Padding ------------+ |  |
|  |  |                                | |  |
|  |  |         width × height         | |  |
|  |  |                                | |  |
|  |  +--------------------------------+ |  |
|  +-------------------------------------+  |
+-------------------------------------------+
  • 每环有四边。边显示其值，例如 24px，未设置时显示“-”。
  • 点击边可打开小选择器，含滑块、值字段和单位按钮。单位为 PX 或 %；Border 只接受 px。
  • 输入值按 Enter，或拖动滑块。上下箭头键以 1 为步进调整值。Escape 关闭选择器。
  • 要取消设置某边，清空值字段按 Enter。该边显示“-”，改由您的主题决定。

Margin 从 -200 到 200，padding 从 0 到 200，border 从 0 到 50。width 和 height 从 0 到 2000。负 margin 会将元素拉向其相邻项。超出范围的输入值会被截到最近的限值。

锁定

每环在其名称旁都有锁：Margin、Border 和 Padding。锁关闭时，在一边设置的值会应用到四边。锁打开时，每边保持各自的值。关闭锁不会改变已有值；只有下一次设置的值会被复制。

百分比、尺寸与屏幕宽度

百分比值是元素父元素宽度的份额，上下也一样。因此，宽列中的 10% 上内边距比窄列中的更高。

盒模型中部为 width × height。自行确定尺寸的元素（例如图像和地图）会忽略这两个框。

盒模型没有按屏幕尺寸分别设置的值。要让大屏幕的内边距大于手机，请改用 Bootstrap 类。例如，py-3 py-lg-5 在较小屏幕上为 16 px，从 992 px 宽起为 48 px。输入方法请参阅HTML ID 和类。

您的值与主题间距的配合

  • 新版块自带内边距。在编辑器中添加的版块会获得 Vertical padding size 5 (py-5) 类：上下各 3rem（约 48 px）。该类标有 !important，因此优先于您的上下 Padding。左右内边距仍然有效。
  • 间距类优先。任何 HTML classes 下的 Bootstrap 间距类，例如 Top margin size 3 (mt-3)，优先于同边的您的值。
  • 列保留间隙。Bootstrap 给每列左右各 12 px 内边距。列上的左右 Padding 会替换它，导致内容不再与下一列对齐。
  • 段落保留自己的间距。您的主题在每个段落和标题下方留白。盒模型不改变该空间，因为它作用于整个元素。
  • 相邻项的外边距通常重叠。当一个元素位于另一个上方时，前者的下外边距与后者的上外边距共享间隙。较大者胜出；不会相加。

如果您没有看到它

  • 版块的上下内边距不起作用。原因是 Vertical padding size 5 (py-5) 类优先。请移除 HTML classes 下的其标签。
  • 外边距或内边距值不起作用。同边的 Bootstrap 间距类优先。请移除其标签，或只使用类。
  • 内边距不显示。元素没有背景或边框，空间不可见。调整时请选择一个 Background 颜色。
  • 值跳到了 200。内边距和外边距止于 200，边框止于 50。请使用更小的值或百分比。
  • 页面在手机上很挤。同一像素值适用于所有屏幕。请使用更小的值、百分比或响应式类。
  • 两个间隙没有相加。堆叠的外边距重叠，较大者胜出。请将整个间隙放在两个元素之一上。
  • 列不再对齐。列上的侧边 Padding 替换了网格间隙。请重新清空这些边。

接下来做什么？

  • 排版：设置间距盒子内文本的大小和颜色。