The Content Box
Every element starts with a content box — the innermost layer.
Step 1 of 3
Everything is a box
In CSS, every element on the page is a rectangular box — text, images, buttons, everything. Why? Because the browser needs to know exactly how much space each element occupies so it can lay out the page.
The CSS Box Model is the system browsers use to calculate that space. It wraps every element in four layers: content, padding, border, and margin. Every YouTube thumbnail, every Google search result card, every Instagram post — they're all boxes with these four layers.
Think of it this way: Think of a picture frame. The photo is the content, and it's surrounded by layers of matting, the frame itself, and space on the wall around it.
Web Standard
Every HTML element generates a box — even inline elements like . The box model is part of the CSS specification and governs all layout in the browser.
Learn more on MDN
THE CSS BOX MODEL
margin
border
padding
content
Content
Padding
Border
Margin