Content, padding, border, and margin stack outward from the inside. Adjust each layer below and watch how the total footprint changes — including the moment box-sizing flips the rules.
Adjust the layers
Box model
Typography
Children — two <p> inside the <div>
The gap is set as margin-bottom on the first paragraph — adjacent vertical margins between siblings don't add together with the div's own padding, they sit inside it.
Cross-section
rendered size:
margin
border
padding
Typography is the craft of giving language a body. The box model decides how much room that body gets to breathe.
Typography is the craft of giving language a body.
The box model decides how much room that body gets to breathe.
Contentwhere text and child elements sit
Paddingclear space inside the border
Borderthe visible edge of the element
Marginclear space outside the border
Generated code
Matches the controls above — copy straight into a stylesheet.