Skip to content

How to make an hr invisible

I wanted to have a separation between sibling elements on my HTML page.

One idea I had was to wrap them in section tags, or in a div, and apply a margin on top of bottom of that element.

Another approach was to not touch the overall HTML structure, and instead put a tag to be a divider.

So I used an hr tag, which semantically represents a thematic break between paragraph-level tags.

And I styled it in this way, to make it invisible but still take space:

hr {
  margin-top: 100px;
  border: none;
}

→ Here's my latest YouTube video

→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list