【发布时间】：2015-04-23 20:29:02
【问题描述】：
如何删除 wordpress Divi 主题部分之间的空格？
【问题讨论】：
【发布时间】：2015-04-23 20:29:02
【问题描述】：
Vasili 有一个很好的答案，但是，当您在 Divi 构建器中查看行/列的属性时 - 您将看到 Custom Margin 和 Custom Padding。这些将位于某些元素的常规选项下，而在其他元素的高级设计设置下。
默认情况下，这些都是空白的，但是 NOT 是否意味着它们被设置为 0。如果您将顶部/底部的填充和顶部/底部的边距更改为 0，您无需使用代码和大量 CSS !important 标签就应该能够删除空格。
作为一般经验法则，尽可能避免使用 !important 标签。覆盖 DIVI 中的某些行并不总是有效 - 您可能在一个页面上有需要填充的行，在其他页面上有 20 个不需要填充的行。如果您正在使用构建器构建页面，我建议您尽可能多地尝试。
【讨论】：
-
实际上，据我回忆，
!important标签正是 Divi 本身用来覆盖默认间距的方法，通过您提到的设置字段应用任何自定义间距。所以这不能避免。 -
谢谢，亚历克斯！优雅的主题，如果你在听，这有点蹩脚。界面应显示默认值；对我来说，显示空白意味着
0。
为了让这对初学者更有用。
不使用代码，如果在同一部分中放置另一行就足够了，您可以尝试。
如果不能，我们可以做 poostchi 所做的事情，我们可以更改该部分的 css。 现在，如果您转到您的网站并右键单击一个部分并选择检查元素（假设您的浏览器是 chrome），您将看到您的部分编码如下。
<div class="et_pb_section et_section_regular" style="background-color:#2388e0;">
<div class="et_pb_row">
<div class="et_pb_column et_pb_column_4_4">
<div class="et_pb_text et_pb_bg_layout_dark et_pb_text_align_left">
This is row 1 section 1
</div> <!-- .et_pb_text --><div class="et_pb_text et_pb_bg_layout_light et_pb_text_align_left">
this is row 2 of section 1
</div> <!-- .et_pb_text -->
</div> <!-- .et_pb_column -->
</div> <!-- .et_pb_row -->
</div>
在这里我们看到他们正在使用类 et_pb_section
单击类名将显示具有 50 像素填充值的类 css 代码：
.et_pb_section {
padding: 50px 0;
position: relative;
}
所以我们要做的就是将那里的填充值覆盖为 0，这就是 pootschi 所做的。
.et_pb_section{
padding-top: 0px !important;
}
!important 告诉 css 用这个覆盖。
但是通过这样做，您的所有部分 DIVI 定义的填充值将被覆盖。
如果您只想缩小特定部分的差距怎么办？
Divi 已包含 css ID 和 css CLASS，以便更好地自定义其部分和模块。您可以通过单击我们部分的编辑按钮来找到它。
CLASS 方法
为您的部分指定一个 CSS CLASS 名称：reduce_top_padding_here
那么你就可以这样做了。
.reduce_top_padding_here {
padding-top: 0px !important
}
现在我们把这个 css 代码放在哪里？
Divi 允许通过进入
外观 > Divi 主题选项 > 常规设置 >
轻松编辑 css
向下滚动以找到“自定义 css”（将代码粘贴到此处。）
说明：
在这里，您已经创建了自己的 css 类。所以只有你给这个类名的 section 或 module 会继承这个 css 显示指令来给顶部填充 0 像素。而不是重写 DIVI 的主要 .et_pb_section 类。
注意类名前面的点表示在css中该名称是一个类。
所以总结编辑特定部分
1- 给你的部分一个 CSS CLASS
2-然后在divi主题选项>“自定义css”中定义该CSS类值
【讨论】：
-
不错，但并不总是有效。如果您可以将一个类添加到不属于模块的部分中，那就太好了？
我不确定 Divi 主题当时是否有这个，但如果你去 Divi 主题定制器 > 常规设置 > 布局设置 有 Section Height 和 Row Height.
对于移动设备，请转到 Divi Theme Customizer > Mobile Styles，手机和平板电脑都有部分和行高。
你可能还需要一些 CSS。
【讨论】：
我刚刚找到了！
.et_pb_section{
padding-top: 0px !important;
}
【讨论】：
我想扩展 Vasili 分享的内容，以便提供更完整的答案（尤其是关于排除全宽部分）。
我怀疑 Alex Seidler 的回答没有抓住重点。我怀疑提问者想在整个站点范围内删除此填充站点。正如他所建议的那样，通过 Divi 构建器执行此操作将非常乏味，并且实际上会向站点引入更多（Divi 生成）附加 CSS，包括所有 !important 标签（关于这一点，请参阅最后一个注释在这个答案的末尾）。
正如 Vasili 和提问者指出的那样，以下代码将覆盖所有部分的填充。
.et_pb_section{
padding-top: 50px !important;
}
请注意，54px 顶部和底部目前是超过 1350 像素屏幕上的默认设置。 4% 是 981p 及以下屏幕的默认设置。我说“目前”是因为我记得它曾经是50px。它可能仍然是50%。无论如何，根据您的需要减少它。提问者希望删除所有间距，在这种情况下将其设置为 padding-top: 0 !important。
不包括全角部分
如果您使用任何全宽部分，上述更改可能会产生一些不良影响。如果发生这种情况，您可能需要排除这些部分，并使用以下内容：
:not(.et_pb_fullwidth_section).et_pb_section {
padding-top: 50px !important;
padding-bottom: 50px !important;
}
请记住，这将影响所有部分中的所有行。
仅限特定部分
如果您只想覆盖特定部分的填充，请使用 Vasili 在他的回答中提出的建议。
减少行填充
任何想要减少默认节垂直填充的人可能也会发现自己想要减少行垂直填充。
为此，将此 CSS 添加到您的子主题 styles.css 文件中：
.et_pb_row { padding-top: 30px !important; }
30px 是默认值。减少此值以满足您的需要。
仅限特定行
要仅减少特定行，您可以在 Divi Builder 的“设计”选项卡中为相关行逐行执行此操作，或者您可以为行指定一个唯一的类（在行设置的“高级”选项卡），然后将设置应用于您的子主题 styles.css 文件中的该类。这与更改特定部分的过程相同。例如，将行指定为 `row-reduced-top-padding' 类，然后将其指定为 styles.css 文件：
.row-reduced-top-padding { padding-top: 10px !important; }
这种方法的优点是稍后调整设置的速度要快得多，特别是如果您已将此方法应用于很多行。
避免 !important，不可能
至于 Alex Seidler 关于避免使用!important 标签的评论：虽然确实最好避免这种情况，但在这种情况下这是不可避免的。上次我检查时，当您通过 Divi Builder 更改部分和行的边距和填充时，即使是 Divi 本身也会使用 !important 标签。这是因为它还必须覆盖 Divi 已经声明的站点范围的默认值。
【讨论】：