Search⌘ K

Section Margin Collapse Fixer

Understand how to define a CSS custom property for vertical rhythm and apply it to headings and paragraphs. Learn a CSS-only method to prevent margin collapsing between adjacent sections, ensuring consistent spacing and a clean layout without altering HTML or using JavaScript.

Problem description

You have multiple <section> elements in a document, each containing an <h2> and one or more <p> elements. Your task is to define a CSS custom property for a 1.5rem baseline rhythm and apply it to the line-height and bottom ...