How to make an hr invisible
New Course Coming Soon:
Get Really Good at Git
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;
}
→ Read my DOM Tutorial on
The Valley of Code
→ Read my
Browser Events Tutorial
on The Valley of Code
→ Read my
Browser APIs Tutorials
on The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X