How to make an hr invisible

To make an hr tag invisible while keeping the space it creates, remove its border and give it a margin:

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

Let me explain why this works, and why I needed it in the first place.

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 or 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.

Why border: none hides the line

The horizontal line you see when you drop an hr on a page is not content. Browsers draw it using the element’s border, through their default stylesheet.

So border: none removes the visible line entirely. The element is still there, still in the document flow, and its margin still pushes the surrounding content apart. That’s exactly what I wanted: an invisible divider that creates vertical space.

What about display: none or visibility: hidden?

display: none also hides the line, but it removes the element from the layout completely. No space, no separation. Not useful here.

visibility: hidden keeps the element’s box in the layout, so it does preserve the space. But border: none plus a margin gives you direct control over how big the gap is, which is what a divider is for.

Watch out for margin collapse

One thing that surprised me: vertical margins between block elements collapse.

If the paragraph above the hr has a margin-bottom of 30px and the hr has a margin-top of 100px, the gap is not 130px. It’s 100px, the larger of the two.

Usually this is fine. But if you increase the margin on the hr and nothing seems to change, check the margins of the elements around it. One of them is probably larger and winning the collapse.

Last note: hr still means “thematic break” to screen readers, which announce it as a separator. In my case the sections really were distinct topics, so that was correct. If your divider is purely decorative, add aria-hidden="true" so assistive technology skips it.