- Why Elementor Adds Extra Spacing at the Bottom of a Text Editor Widget
- How to Remove the Extra Bottom Margin in Elementor
- What This CSS Code Does
- What Is the Custom CSS Field in Elementor
- Can You Use the CSS Fix in Elementor Free
- 1. Add CSS via “Additional CSS” in the WordPress Customizer
- 2. Add CSS to a Child Theme
- What Is the Text Editor Widget in Elementor
- Why Elementor Behaves This Way
- Benefits of Removing the Extra Margin
Anyone who builds pages with the Elementor Page Builder eventually notices a small but noticeable design issue: the Text Editor widget often adds an extra empty line at the bottom of the text block. In clean layouts or minimalistic designs, this spacing can disrupt the visual flow and make sections appear uneven.
In this guide, you will learn why this extra space appears, how to remove it with a simple CSS snippet, what the selector keyword in Elementor means, and what options you have when using Elementor Free. You will also see how to apply the fix in a child theme or the WordPress Customizer.
Why Elementor Adds Extra Spacing at the Bottom of a Text Editor Widget
The Text Editor widget generates paragraph elements, also known as p tags. Elementor applies a default margin-bottom to every paragraph to create comfortable spacing between text blocks.
The problem: Elementor also applies this margin to the last paragraph. This results in an unwanted empty space at the bottom of the widget, which can interfere with buttons, icons, images, or any element that follows directly underneath.
Here is a simplified comparison:
| HTML Element | Browser Default | Elementor Default |
|---|---|---|
| p Tag | margin-top: 1em, margin-bottom: 1em | margin-bottom: defined by Elementor |
Elementor overrides the default browser styles and applies its own consistent spacing. However, this also means the last paragraph receives more space than desired.
How to Remove the Extra Bottom Margin in Elementor
If you use Elementor Pro, the solution is very simple. Every widget includes a “Custom CSS” section under the “Advanced” tab. There you can add CSS rules that apply only to that specific widget.
The CSS snippet that removes the unwanted spacing is:
selector p:last-child{
margin-bottom: 0px;
}
What This CSS Code Does
- selector
A placeholder that Elementor automatically replaces with the widget’s unique CSS wrapper. This ensures that the rule only applies to this widget and does not affect any other element on the page. - p:last-child
Targets the last paragraph inside the Text Editor widget. - margin-bottom: 0px
Removes the extra spacing applied to the final paragraph.
The result is a cleaner, tighter layout with precise spacing control.
What Is the Custom CSS Field in Elementor
The Custom CSS field is a premium feature available only in Elementor Pro. It allows you to inject additional styling directly into widgets, columns, or sections without editing theme files or using extra plugins.
This makes it ideal for small adjustments like spacing, typography tweaks, or widget-specific styles.
Can You Use the CSS Fix in Elementor Free
Elementor Free does not include the Custom CSS panel, but you can still apply the fix using one of the following methods:
1. Add CSS via “Additional CSS” in the WordPress Customizer
This method affects all Text Editor widgets across your website.
.elementor-widget-text-editor p:last-child{
margin-bottom: 0px;
}
Pros:
- No plugins required
- Easy to maintain
Cons:
- Global effect on all widgets
- Less control over individual elements
2. Add CSS to a Child Theme
If you are already using a child theme, you can place the CSS in the style.css file.
This method is update-safe and ideal for users who frequently customize their site design.
Pros:
- Permanent solution
- Ideal for structured theme development
Cons:
- Requires FTP or file editing knowledge
What Is the Text Editor Widget in Elementor
The Text Editor widget is one of Elementor’s core widgets. It works similarly to WordPress’s classic TinyMCE editor and supports:
- Text formatting
- Lists
- Inline HTML
- Links
- Shortcodes
- Inline images
Because the widget automatically wraps text inside p tags, the default margin-bottom also applies to the last paragraph, which creates the extra spacing.
Why Elementor Behaves This Way
Elementor is a visual page builder that generates its content through a structured system of widgets and HTML elements. To maintain design consistency, Elementor uses predefined global styles such as:
- Default spacing
- Typography
- Colors
- Paragraph margins
- Widget padding
The extra bottom margin is intentional, but it does not always fit every layout. Removing it allows designers to fine-tune spacing more precisely.
Benefits of Removing the Extra Margin
Removing the unnecessary bottom spacing has several practical advantages:
| Benefit | Description |
|---|---|
| Cleaner design | No unwanted spacing below the text block |
| Better alignment | Buttons, icons, or images align perfectly with text |
| Improved spacing control | Full control over layout and section spacing |
| Better mobile layouts | Less empty space on small screens |
| Shorter pages | Reduces unnecessary scroll distance |
