.svg)
What is the Box Model in CSS?
The Box Model is the fundamental concept governing the layout of every HTML element. Each element is represented as a rectangular box made of four concentric zones: the content, the padding, the border and the margin. Understanding this model is the absolute foundation of CSS.
Unlimited requests, fast results
Submit as many briefs as you need. Our plans allow you to manage a continuous flow of design requests, without limits and without friction, and at an economic cost.
The 4 layers of the Box Model
Content: the zone holding the text or child elements. Padding: the space between the content and the border. Border: the visible frame around the element. Margin: the outer space separating the element from its neighbours. By default, width and height apply only to the content, which is a frequent source of sizing mistakes.
Box-sizing: border-box
The box-sizing: border-box property has become the standard — it includes padding and border in the declared dimensions. That is why most modern CSS resets open with * { box-sizing: border-box; }.
Unlimited requests, fast results
Submit as many briefs as you need. Our plans allow you to manage a continuous flow of design requests, without limits and without friction, and at an economic cost.
Conclusion
The Box Model is the foundation of every CSS layout. Understanding it is essential for sizing elements correctly and building coherent layouts, and adopting box-sizing: border-box makes the work considerably simpler.
Key takeaways
- Every element = content + padding + border + margin
- By default, width/height apply to the content only
- box-sizing: border-box includes padding and border
- Margin collapse: adjacent vertical margins merge
- The absolute foundation of every CSS layout
Unlimited requests, fast results
Submit as many briefs as you like. Our plans let you manage a continuous flow of design requests, without limits or friction, and at an economical price.
