HTML Tips: How to make an hr invisible

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.


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.

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

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

Lessons in this unit:

0: Introduction
1: Preserving white space and line breaks in a string in HTML
2: HTML, avoid displaying a broken image if the image is not found
3: The HTML figure tag
4: Change image source in dark mode
5: Accept only images in file input
6: HTML comments
7: Some useful tricks available in HTML5
8: ▶︎ How to make an hr invisible
9: Conditionally set an HTML attribute
10: An HTML element id is a global variable