If you’re using Posts or Custom Post Types together with Elementor’s Post Content widget (within any Single Post template), you may easily run into an annoying issue. You’ve designed your Post Content with specific margins, padding, or row gaps to achieve the best possible reading experience—clean UX/UI, consistent spacing, and predictable layout.
However, when working with long-form content, empty HTML elements like <p></p> can slip into the structure:
- By simple inattention during writing or editing
- Or when the content is synced from a third-party system (another source of truth), where you cannot update the content directly—especially when automatic updates are enabled
The problem?
CSS spacing (margins, padding) is still applied even to completely empty tags. Similarly, if the parent has display: flex and uses row-gap, these gaps will also affect empty elements.
The Simple CSS Fix
A lightweight CSS rule can automatically hide empty elements and prevent these unwanted spacing gaps:
p:empty {display: none;}
💡 Tip: The :empty pseudo-class works not only for <p> tags but also for other elements like <li>, <div>, and more. This trick is broadly useful—not just within Post Content, but anywhere you want to clean up empty HTML elements in your layouts.
