AI Workshop: learn to build apps with AI →
HTML Tips: How to make an hr invisible

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


I wanted 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 the top or bottom of that element.

Another approach was to not touch the overall HTML structure and instead use a tag as 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