What is the CSS box model?

The CSS box model is the set of rules that determines how every HTML element is rendered as a rectangular box with four layers: content (the actual text or media), padding (space between content and border), border (the visible edge), and margin (space separating the element from its neighbors).

What is the difference between content-box and border-box?

In content-box (the CSS default), width and height apply only to the content area — padding and border are added on top. In border-box, width and height include padding and border, making layouts more predictable. Most developers use border-box globally.

Why do vertical margins collapse?

CSS margin collapsing is an intentional behavior where adjacent vertical margins merge into the larger of the two, rather than adding together. This prevents doubled spacing between paragraphs and headings. Horizontal margins never collapse, and flex/grid children don't collapse either.

Does padding affect element size?

It depends on box-sizing. With content-box, padding adds to the element's total width and height beyond the declared values. With border-box, padding is included inside the declared width and height.

How do I center a block element horizontally?

Give the element a defined width (or max-width) and set margin: 0 auto. The auto value on left and right margins distributes remaining horizontal space equally.

CSS Box Model: Padding, Border & Margin

📦

Try Box Model Visualizer

Free, no signup →