用Elementor的Text Editor部件时,文本底部总会有一段大概20-30px的距离,很影响排版。还要因为这个问题每一段都去单独做布局间距设置,非常麻烦。很多主题都有这个问题。如果把这个问题解决了,那我们编辑文本的时候就方便很多,想设置布局里的padding值或margin值就设置,不想设置的时候默认就可以。
WordPress网站开发过程中,会用到各种各样的主题,很多主题都有这个问题。解决这个问题,有很多种方案,我们一一来测试一下。最终选择哪种 CSS 方案取决于你的具体需求。(以Astra主题为例)
移除Elementor中Text Editor底部空白添加代码步骤:外观→自定义→额外css→添加代码→发布



1、仅移除最后一个段落的底部空白
如果你希望仅移除最后一个段落的底部空白(保留其他段落间的正常间距),使用:
p:last-child { margin-bottom: 0; }

优势:这种方式更精准,只作用于最后一个 p 标签,不会影响段落之间的正常排版,适合大多数内容排版场景。
不足:过于宽泛,会影响全站所有最后一个 <p> 标签,可能破坏其他组件的排版。
2、移除所有段落的底部空白
.elementor-widget-container p {
margin-bottom: 0 !important;
}

这种方式会清除该组件内所有 p 标签的底部边距,可能导致段落之间没有间距,显得拥挤。
3、结合 Elementor 的容器类和:last-child 伪类(推荐)
.elementor-widget-text-editor p:last-child {
margin-bottom: 0;
}

这样既精准又不会影响全局,只会清除文本编辑器组件中最后一个段落的底部空白,既解决问题又不会影响其他元素的样式,是更安全的选择。
如果习惯用文本编辑器里的其他功能,比如说添加编号列表、项目符号列表等功能,那看下它们的标签,把p标签换成对应的ol或者ul,把代码追加到额外css里,发布保存即可。如下图:

