--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/spacing' title: '在元素内外添加间距 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T13:53:19+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 给彩色盒子内的文本留出空间，或将按钮推离其上方的段落。内边距是元素边缘内的空间；外边距是边缘外的空间。两者都在 样式 面板顶部的盒模型中设置。您的主题和新版块自带间距；本页介绍您的设置如何与之配合。 该视频给一个按钮设置了 24 px 的上外边距。 tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 在元素内外添加间距 description: |- 给彩色盒子内的文本留出空间，或将按钮推离其上方的段落。内边距是元素边缘内的空间；外边距是边缘外的空间。两者都在 样式 面板顶部的盒模型中设置。您的主题和新版块自带间距；本页介绍您的设置如何与之配合。 该视频给一个按钮设置了 24 px 的上外边距。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T13:53:19+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/spacing' articleSection: 设置元素样式 - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/spacing' description: |- 给彩色盒子内的文本留出空间，或将按钮推离其上方的段落。内边距是元素边缘内的空间；外边距是边缘外的空间。两者都在 样式 面板顶部的盒模型中设置。您的主题和新版块自带间距；本页介绍您的设置如何与之配合。 该视频给一个按钮设置了 24 px 的上外边距。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 首页 item: 'https://dxpr.com/zh-hans' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: zh-hans --- [帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[设置元素样式](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings) # 在元素内外添加间距. 学习 DXPR Builder搭建页面设置元素样式 ## 本指南内容 相关指南 - [调整文本大小与颜色](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/typography) 给彩色盒子内的文本留出空间，或将按钮推离其上方的段落。内边距是元素边缘内的空间；外边距是边缘外的空间。两者都在 **样式** 面板顶部的盒模型中设置。您的主题和新版块自带间距；本页介绍您的设置如何与之配合。 该视频给一个按钮设置了 24 px 的上外边距。 ## 开始之前 - 在 DXPR Builder 中打开页面；指向元素即会显示其带 **More** 的控制栏。初次使用构建器？请参阅[您的第一页](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/first-page)。 - **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**。 在按钮上，外边距作用于按钮本身，因此空间从其边缘直接开始。 ## 配方：更高的版块 新版块从 **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**。 ## 您会看到的内容 您设置的每一边都会在盒模型中显示其值，例如 24px。按钮下移 24 px，版块内容上下各有 96 px 的空间。 ## 盒模型的工作原理 ```text +----------------- 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 和类](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/custom-css)。 ## 您的值与主题间距的配合 - **新版块自带内边距。**在编辑器中添加的版块会获得 **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** 替换了网格间隙。请重新清空这些边。 ## 接下来做什么？ - [排版](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/typography)：设置间距盒子内文本的大小和颜色。