Introduction
You may have heard of the CSS Box Model, but perhaps you haven't fully understood it. You might wonder, why is it necessary to grasp this concept if I can work effectively with CSS? The straightforward answer is that understanding it is essential for nearly every frontend developer. Since the CSS Box Model dictates the overall structure of documents, how can it be ignored? A significant portion of the developer community also recognizes this importance. As a frontend developer, I had also been neglecting it for a long time. Today, we will explore it in depth so that we can become more effective frontend developers.
Each element in CSS is treated as a CSS Box Model because each element has its own box. Typically, every element in CSS is recognized as a box, even if it appears as a circle or another shape. You can verify this by interacting with the demonstration panel below:
CSS Box Model Demo
Notice that when the Reveal Box button is clicked, the shapes are outlined with a Black border that forms a box-like shape instead of matching their original appearance. This happens because, in CSS, every element is treated as a rectangular box for layout purposes, regardless of how it looks visually.
The outline reveals the true boundaries used by the browser to calculate layout without affecting the element’s size or position. This demonstration helps show that no matter how complex or decorative a shape appears, CSS layout is always based on the box model.
Reveal CSS Box Model
Click the button below to outline every element on the page and understand how the CSS box model works.
When you click the Reveal Box Model button, a class is added to the <body> that draws a Red outline around every element on the page. Even if an element looks like a circle, triangle, or any other shape, the outline shows that its actual space is always a rectangular box made up of content, padding, and borders. Clicking the button again removes the outlines. This makes it easy to understand that, no matter how an element looks, CSS layout is always based on rectangular boxes.
You’re already familiar with the concept, but so far we’ve only demonstrated it. Now let’s explore it in depth. The CSS box model is the collection of content, padding, border, and margin. Each browser also provides a box model structure, as you can see below:
You've watched the clip above and got an idea of what it looks like. Also, have you noticed that when you select an element using the inspect tool, the browser highlights it like a box? It is a game of the box model.
Content
The content area is the central part of a box and holds the element’s actual content, like text, images, or other elements. It directly represents an element's width and height. In this interactive example, when you set a width (e.g., 150px) and height (e.g., 100px), the content box visually reflects these dimensions, and you can see your text inside this area. The preview updates live as you change the values.
Box Model Interactive Tool
Live Preview:
Created Element:
Notice how the content area explicitly matches the values you entered. The surrounding layers— padding, border, and margin — also visually adjust according to the numbers you set. This demonstrates how each part of the CSS box model contributes to the overall size of an element. By adjusting the numbers, you can experiment and verify exactly how content, padding, border, and margin work together, just like in a browser’s developer tools.
Padding
Padding is the second part of the CSS box model. It represents the space inside an element, located between the content and its border. Padding increases the distance between the content and the border, unlike margin, which adds space outside the element. When padding is added, it becomes part of the element’s overall size.
For example, applying padding: 10px creates extra space around the content inside the element. You can interact with the example below to adjust the padding value and see how it affects the box. Observe how increasing padding expands the inner space and changes the size of the element within the CSS Box Model.
Box Model Interactive Tool
Live Preview:
Created Element:
Border
It is the is the third layer of the box model, surrounding the padding. A border is a line or edge that surrounds the perimeter of an element, often used to define its boundaries or visually separate it from other elements.
Box Model Interactive Tool
Live Preview:
Created Element:
For example, in the example above, the border is already set to 2px in its corresponding input field. As a result, a black line appears around the element. You can increase or decrease the border size to see how it changes visually. This border becomes part of the CSS box model structure and contributes to the element’s overall size.
Margin
Margin is the last part of the CSS box model and represents the space around an element. Margin is the empty area outside the border that separates an element from other surrounding elements, creating distance between them.
Margin Interactive Tool
Live Preview:
In the interactive example above, you can observe this by adding margin: 10px using the margin input. As the margin value increases, the element moves away from its original position, showing how margin affects spacing without changing the element’s internal size.
Now that we have covered all the parts of the CSS box model, you should have a clear understanding of how each layer works together. However, the box model is not the end—there are a few important tips and concepts ahead that can help you understand layout behavior even better.
Element sizing & the principles of the box model
The box model plays a crucial role in element sizing, but how exactly? Let’s break it down using an example. Consider the following CSS styling for a button:
Width: 100px;
Height: 40px;
Padding: 10px;
Border: 5px;
Margin: 5px;
What is the actual width of the button?
At first glance, you might think the width is simply 100px. But here’s the key: the box model includes padding and border in the element's total size.
- Start with the width of the button: 100px.
- Add the padding: Padding adds space inside the button, but it’s still part of the element. Since we have 10px padding on the left and 10px on the right, we add 20px to the width.
- The word Add the border: Borders also contribute to the element’s total size. The left and right borders are both 5px each, so we add 10px.
Now, let’s calculate it:
- Width: 100px
- Padding: 10px + 10px = 20px
- Border: 5px + 5px = 10px
So, the total width becomes:
100px (width) + 20px (padding) + 10px (border) = 130px
When calculating the size of an element, margins are not included in the element's width or height. That's why we haven’t added the margin in this calculation. The margin is the space outside the element and doesn’t affect the actual size of the box itself.
You can check the example below for a better understanding.
Box Model: Actual Width Calculator
Live Preview:
Actual Width Calculation:
Width: 100px
Padding: 10px + 10px = 20px
Border: 5px + 5px = 10px
Total Actual Width: 130px
Note: Margin is not included in the element's width calculation. It only affects spacing outside the element.
I hope you have understood the point, as this example explains it in detail. Now, be ready for a small question: What is the height of the button according to the Box model? Select the correct one from the options below.