Knowledge Maxxing← Back to topic library
Dev MaxxingBeginnerHTML and CSS75 sec
CSS box model
The CSS box model describes how an element's content, padding, border, and margin combine to determine its total rendered size and spacing.
Prerequisite: CSS selector
What matters
Most layout confusion, like unexpected element sizes or spacing, traces back to misunderstanding how these four layers stack around the content.
Example
An element with 100px content width, 10px padding, and a 2px border actually occupies 124px total width, before any margin is added.
Common misconception
An element's declared width does not always equal its full visible size; padding and border can add to it unless box-sizing is set otherwise.
Recall question
What four layers make up an element's total rendered size in the box model?
Keywords and related concepts
box modelpaddingmarginborder