Elementor: Remove extra paragraph spacing in text editor


One of the peeves we have with Elementor or Elementor Pro is that it’s text editor widget seems to have an extra line below the last paragraph.

The extra spacing seems to be inherent in Elementor version 2.5 and above. As this only started to happen after we have upgraded the plugin. However, this also could be specific to the theme that we are using. As of writing, the effects are noticed in the Astra Theme and the default Twenty Seventeen Theme. Of course this may certainly apply to other WordPress Themes as well.

Paragraph Spacing
This is what we are talking about

In any case, this is really not an error with the Elementor plugin. This occurs because there must be spacing below every paragraph element. Otherwise the paragraphs would not look like paragraphs at all.

And although minor, this is really quite an annoyance. As it could disrupt layouts and any elements below the text editor. Fortunately, there are quick and easy fixes to this “problem”.

How to remove extra spacing below paragraph in Elementor

For our build, we were using the Elementor 2.5.14 with Elementor Pro 2.5.5 plugins. And Astra 1.8.2 (Free Version).

Option 1: Negative Margin

One of the good things about Elementor is that it allows the adjustment of Margin and Padding. Go to the elements under the text editor and adjust the margins accordingly.

You can find the margins options under the Advanced tab in Elementor.

Negative Margin

But, if you have several text widgets already in use, it could be a cumbersome process. That brings us to Option 2.

Option 2: Simple CSS class

Simply copy and Paste the following CSS code to your theme.

.elementor-text-editor p:last-child{ margin-bottom:0px;}

Some themes allows additional CSS to be added via the Customizer panel. And you can paste the code there. However, if there is no such option, you have to add it into your theme files.

And if you are using the WordPress Text Widget as well you can include the CSS rule by applying:

.elementor-text-editor p:last-child, .textwidget p:last-child { margin-bottom:0px;}

First, locate the Appearance Tab of your dashboard and click on Theme Editor. Next, select the current theme that you are using and find style.css“. Lastly,Go to the last line of the codes and paste in the CSS code in a new line.


Thank you for reading our article. We hope this is of some help to you. And if you have another solution to share, please feel free to leave a comment below.

More Articles about Elementor:
Best Elementor Addons and Widgets
Best Lightweight Themes for Elementor
Elementor: Preview cannot be loaded

Notify of
Inline Feedbacks
View all comments