How to make an hr invisible

Nov 11, 2021

Learn how to make an hr tag invisible but still take up space, using it as a divider between sections by removing its border and adding a top margin.

~~~

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

~~~