CSS Box Model Summary

The CSS box model describes the space every element uses: its content, padding, border, and margin.

Every visible HTML element is treated like a box. CSS uses the box model to calculate how much room that element takes up on the page.

.card {
	width: 300px;
	padding: 20px;
	border: 1px solid gray;
	margin: 20px;
}

Content

The content area holds the element’s text, image, or child elements. The Size lesson explains how width and height affect this area.

Padding is space inside the box, between the content and the border. More padding makes the content feel less cramped.

The border is the line around the padding and content. Borders can show the edge of a box or separate it from nearby content.

Margin is space outside the border. It pushes the element away from neighboring elements.

With the default box model, width sets the content width. Padding and border are added on top of that width.

* {
	box-sizing: border-box;
}

Many projects use border-box so an element’s width includes its content, padding, and border. This makes layouts easier to predict.