是否想在 WordPress 块之间添加或删除空白空间？
通过调整这些空白间隙，你可以更好地控制网站的设计，从而为访问者提供更好的用户体验。
在本文中，我们将逐步向你展示如何添加或删除WordPress块之间的空白空间。
为什么要调整 WordPress 块之间的空白空间？
WordPress的内置区块编辑器可以轻松创建自定义页面和文章。然而，你可能会注意到，有时不同区块之间的空白间隙可能过多或过少。通过调整这些空白间隙，你可以创造出自己想要的页面布局。
这种细节上的控制不仅能提升网站的整体视觉效果，还能提升用户体验。接下来，我们将逐步介绍如何在网站上调整WordPress块之间的空白空间。你可以直接跳到你想使用的方法：
- 方法1：使用区块编辑器添加空白空间
- 方法2：添加自定义CSS代码以调整空白空间
- 方法3：使用CSS Hero插件调整空白空间
- 方法4：使用SeedProd调整空白空间
方法1：使用区块编辑器添加空白空间
最简单的方式是使用Gutenberg区块编辑器。这个编辑器内置了一个空白区块，可以通过几步操作添加空白。
首先，打开你要编辑的文章或页面，点击“加号”来添加区块。
然后，搜索“Spacer”并选择这个区块。这将自动在页面中插入一个空白区块。
你可以通过上拉或下拉来调整空白区块的大小。完成后，点击“更新”按钮保存更改。如果你使用的是区块主题，还可以通过完整的站点编辑器来调整主题模板中的区块间隙。
除了插入空白区块，还可以在区块设置边栏中增加区块的边距，以增加它们之间的空间。更多详情可参见我们的WordPress中padding vs. margin的指南。需要注意的是，这种方法只能增加空白空间，若要移除空白空间，则需采用以下其他方法。
方法2：添加自定义CSS代码以调整空白空间
另一种既可以增加又可以移除区块间空白的方法是向主题添加自定义CSS代码。如果你之前没有这么做过，建议先参考我们关于如何向WordPress站点添加自定义CSS的指南。
首先，打开你要编辑的页面或文章，点击你想调整的区块，然后在右侧选项面板中点击“区块”菜单项。
接下来，向下滚动找到“高级”下拉菜单并点击它。在“额外的CSS类”框中输入以下代码：
.add-remove-bottom-space { margin-bottom: 0; }这个代码片段创建了一个专门用于该区块的新CSS类。然后，点击“更新”按钮保存更改。
接着，导航到“外观 » 自定义”，打开WordPress主题自定义器。向下滚动并点击“额外的CSS”菜单选项。在弹出的字段中粘贴以下代码：
.add-remove-bottom-space { margin-bottom: 0; }这个代码段将底部边距设置为零，从而移除了该区块的空白间隙。如果你想增加底部空间，只需将‘0’改为类似‘20px’的值。完成更改后，点击“发布”按钮使更改生效。
使用插件保存自定义CSS代码
添加自定义CSS到WordPress主题自定义器后，只会对当前主题有效。如果更换主题，需要将CSS代码复制到新主题中。为了让自定义CSS不受主题更换影响，可以使用插件。
WPCode 是一个优秀的代码片段插件，允许你向WordPress站点添加PHP, CSS等代码，而不破坏任何东西。首先，安装并激活免费WPCode插件。更多详情请参见我们的插件安装指南。激活后，转到“代码片段 » + 添加片段”。在代码片段库中，鼠标悬停在“添加自定义代码（新片段）”选项上，点击“使用片段”按钮。
需要为代码片段输入一个名称，然后将自定义CSS粘贴到“代码预览”框中。确保从“代码类型”下拉菜单中选择“CSS片段”。然后点击顶部的滑块使片段“激活”，并点击“保存片段”使代码在WordPress站点上执行。更多详情请参见我们的WordPress站点如何轻松添加自定义CSS的指南。或者，可以使用Simple Custom CSS插件。激活后，只需转到“外观 » 自定义CSS”并添加自定义CSS代码。完成后，点击“更新自定义CSS”按钮保存更改。
方法3：使用CSS Hero调整空白间隙
另一种方便的方式是使用WordPress自定义CSS插件，这样无需编辑任何CSS代码即可对博客进行视觉修改。我们推荐使用CSS Hero插件。它允许你编辑WordPress站点的几乎所有CSS样式，而无需手写代码。
首先，安装并激活插件。更多详情请参见我们的插件安装指南。激活后，需要点击“进行产品激活”按钮激活插件。这个按钮位于安装插件列表的上方。这将打开一个页面，输入用户名和密码，根据屏幕上的提示操作，验证帐户后，你将被重定向回仪表盘。
接下来，打开你要编辑的页面或文章，点击WordPress管理员工具栏顶部的CSS Hero按钮。这将打开一个包含CSS Hero 的相同页面，插件使用一个可视化编辑器，你可以实时进行更改。当你点击页面上的任何元素时，会在页面左侧弹出一个工具栏供调整。
要移除或添加区块之间的空白，只需点击“空隙”选项，然后向下滚动到“下边距”部分。这里你可以向上或向下拖动滑块来调整空白间隙。所有更改都会自动显示在页面上。完成后，点击“保存”按钮使更改生效。
方法4：使用SeedProd调整空白间隙
SeedProd 是最好的拖放页面构建器，由超过100万个网站使用。你可以使用其300多个模板库创建自定义404页面、销售页面、登陆页面等。SeedProd 甚至可以用来创建自定义WordPress主题，而无需编写任何代码。使用拖放构建器，你可以完全控制站点的设计，并轻松调整任何网站元素的间隙。
欲了解更多信息，请参见我们的WordPress中如何创建自定义页面的指南。
在定制页面时，可以使用空白区块随处添加间隙。只需将其拖放到页面上的任意位置即可调整区块之间的空白间隙，然后使用滑块调整其高度。
你还可以控制任何区块之间的间隙。要做到这一点，只需点击你要调整的任何区块。这会在左侧弹出选项面板。然后，点击“高级”选项卡，向下滚动到“间隙”下拉菜单并点击它。这会弹出一个控制“边距”的菜单。只需在底部边距框中输入一个数值来添加空白，或删除数值以移除现有的空白。
完成更改后，点击“保存”按钮，然后选择“发布”下拉菜单使更改生效。
希望这篇文章能帮助你了解如何调整WordPress区块之间的空白间隙。你还可以参阅我们的指南了解如何开始自己的播客以及我们专家推荐的最佳WordPress托管服务商。
如果你喜欢这篇文章，请订阅我们的YouTube频道获取WordPress视频教程。你也可以在Twitter和Facebook上找到我们。
