Box Model
In CSS, every HTML element is treated as a rectangular box. The Box Model describes how the size of a box is calculated, including:
- Content – The area where text or images appear.
- Padding – Space between the content and the border.
- Border – A line surrounding the padding (or content if no padding is set).
- Margin – Space outside the border, separating elements.
The total width of an element is calculated as:
Total Width = Content Width + Padding (Left + Right) + Border (Left + Right) + Margin (Left + Right)
The total height of an element is calculated similarly.
Here is a diagram of how these four layers nest inside one another:
+---------------------------+
| Margin |
| +---------------------+ |
| | Border | |
| | +-------------+ | |
| | | Padding | | |
| | | +-------+ | | |
| | | |Content| | | |
| | | +-------+ | | |
| | | | | |
| | +-------------+ | |
| +---------------------+ |
+---------------------------+
You control all four layers with the width, height, padding, border, and margin CSS properties.
Exercise
Modify the <div class="box"> element so that it has:
- A width of 300px and height of 100px
- 20px of padding
- A 5px solid border
- A 15px margin
Sponsors
