MoreLesson 260Free preview

Dividers

This lesson is part of How To · All levels

Summary

Dividers or separators help break down the content into more easily scanned parts. The <hr> element is a semantic choice for topic displacement, and its appearance can be changed by border, color, gradient, as well as margin. Use enough separators to make the page feel less full of lines.

Key points

It has a thematic meaning, not just a decorative line. (<hr>)
Border: then the border-top gives a consistent thin line.
Gradients can be made with small heights and a linear-gradient background.
The margin sets the vertical distance of the divider from the surrounding contents.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.