When I do interviews for Frontend positions, I find myself very often asking the same question.

Can you tell me what the CSS Box Model is?

And most of the time, I get either a wrong answer or a very confusing one.

I feel like CSS Box Model is something every Frontend developer should know, and this is why I'm sharing it with you.

When you get yourself under this situation of being asked this question, you should clearly respond:

CSS Box Model is the way CSS structures DOM elements and it's formed of 4 parts: Content, Padding, Border and Margin.

Explained

DOM Elements are represented as a rectangular box according to CSS basic box model. The CSS of the box, determined the size, position, and other properties (color, background, border...etc.)

Every box is composed on four parts: Content, Padding, Border and Margin (In that order).

CSS Box Model

The content (the blue area), contains the real content of the element, such as text, image or any other elements. If the box-sizing property is set to content-box (default), its size can be specified with any min/max width or height.

The padding (the green area), goes outside of the content, its purpose is to give space to the content.

The border (the yellow area), goes outside of the padding and its purpose is to set the edges of the box. If the box-sizing property is set to border-box the padding and the border will count as content, so they will count as width or height.

The margin (the orange area), goes outside of the border and its purpose is to give space between the border of the box and any other content in the page.

Read about "interview questions"

CSS Box Model