Good spacing makes a page easier to read and more pleasant to scan. But adding space before every heading can create unwanted gaps — especially when headings follow each other or appear at the top of a section. In this guide, you’ll learn a simple CSS technique to add space before headings only when it actually improves readability.
We want to add top spacing to headings when:
This keeps related headings visually grouped while still separating them from normal content like text, images, or lists.
Use the adjacent sibling selector (+) together with :not() to target only the headings that need spacing:
.app :not(h1, h2, h3) + h1,
.app :not(h1, h2, h3) + h2,
.app :not(h1, h2, h3) + h3 {
margin-top: 20px;
}:not(h1, h2, h3) selects any element that is not a heading.+ h1, + h2, + h3 selects a heading that comes directly after that element.This means:
You can fine-tune the spacing for each heading level:
This gives you more control over visual hierarchy.
A small CSS rule like this can make a big difference in how professional and readable your pages feel.
This set explains the step-by-step solution to dynamically adjust a search input field's width in a navigation bar using CSS. The input field starts with a default width and expands to take up available space when the user focuses or enters text. The solution leverages flexbox and dynamic styles for a responsive and fluid user experience. Each Snipp in this Set addresses a key aspect of the implementation.