Bassam Shammari

Say Goodbye to Pesky Spaces: A Quick Fix for Elementor H Tags and P Tags

If you’ve been using Elementor for a while, you’ve probably noticed that sometimes your headings (H tags) and paragraphs (P tags) have a bit too much breathing room. It’s like they’re practicing social distancing when all you want is a tight, cohesive layout. Well, fear not! I’ve got a quick and easy solution that’ll have your content hugging it out in no time.

Ready for the secret sauce? It’s all about a little CSS magic. Don’t worry if you’re not a coding wizard – I’ll walk you through it step by step.

  1. Find Your Way to Custom CSS First things first, let’s navigate to where we’ll be adding our code:
    • Open up your Elementor editor
    • Look for the hamburger menu (those three lines) in the top left corner
    • Click it and scroll down until you see “Site Settings”
    • Now, hunt for the “Custom CSS” tab
  2. The Code That Conquers Spaces Here’s the star of the show – the CSS code that’ll send those spaces packing:
h1, h2, h3, h4, h5, h6, p {
    margin-bottom: 0 !important;
}

Just copy and paste this into your Custom CSS section. Easy peasy!

3. Save and Celebrate

Hit that “Update” or “Publish” button and give yourself a pat on the back. You’ve just levelled up your Elementor game!

Happy Elementor-ing, folks!