Web Development - CSS Box Model
CSS Box Model
Every HTML element on a web page is treated as a box. The CSS Box Model describes how these boxes are structured and how space is calculated.
The Four Parts of the Box Model
Each box consists of four layers:
- Content - The text or image inside the element.
- Padding - The space between the content and the border.
- Border - The edge that surrounds the padding and content.
- Margin - The space outside the border, separating it from other elements.
The image below illustrates the box model visually:
Example
Basic box model structure:
div {
width: 300px;
padding: 20px;
border: 5px solid gray;
margin: 25px;
}
Try it Yourself »
In this example:
- Content width = 300px
- Padding adds 40px total (20px left + 20px right)
- Border adds 10px total (5px left + 5px right)
- Margin adds 50px total (25px left + 25px right)
So the total element width is 300 + 40 + 10 = 350px.
Tip: Use browser developer tools (F12) to inspect elements and visualize their box model directly.
Width and Height
By default, the width and height of an element apply only to the content box - not including padding, borders, or margins.
Example
Default sizing:
div {
width: 300px;
padding: 20px;
border: 10px solid gray;
}
Try it Yourself »
The total width = 300 (content) + 40 (padding) + 20 (border) = 360px.
Box-Sizing Property
You can change how the browser calculates an element's total size using box-sizing.
content-box- (default) width/height include only content.border-box- width/height include content, padding, and border.
Example
Using border-box:
div {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 10px solid gray;
}
Try it Yourself »
Now the total width remains 300px because padding and borders are included within that size.
Global Box-Sizing Reset
A common practice is to apply box-sizing: border-box to all elements for predictable layouts.
Tip: Most modern CSS frameworks (like W3.CSS or Bootstrap) use box-sizing: border-box globally for easier sizing.
Margin and Padding in Box Model
Padding and border are part of the box's size. Margins add extra space outside the box.
Example
Comparison of spacing:
div.one { padding: 20px; background: lightyellow; }
div.two { margin: 20px; background: lightblue; }
Try it Yourself »
Box Model Summary
| Property | Description |
|---|---|
| content | The text or image inside the element |
| padding | Clears space inside the border |
| border | Surrounds padding and content |
| margin | Clears space outside the border |
Best Practices
- The box model controls layout and spacing in every web design.
- Use
box-sizing: border-boxfor simpler layout control (to include padding and border in total width). - Use margins for outer spacing and padding for inner spacing.
- Inspect element boxes with browser dev tools to debug layouts.
- Be aware that padding and border increase total box size in
content-boxmode.
Next, you'll learn about CSS Display - how elements behave in the layout (block, inline, inline-block, and none).
