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;
}
→ 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