Lesson 5 of 50 · css
The Box Model
Duration: 10 mins
Every element is a rectangular box made of:
+---------------------------+
| margin (transparent) |
| +---------------------+ |
| | border | |
| | +---------------+ | |
| | | padding | | |
| | | +----------+ | | |
| | | | content | | | |
| | | +----------+ | | |
| | +---------------+ | |
| +---------------------+ |
+---------------------------+
- content – text or media.
- padding – space inside the border.
- border – line surrounding padding.
- margin – space outside the border.
Example: Visualising the box model
.box {
width:200px; /* content width */
padding:20px; /* inner space */
border:5px solid #333; /* border */
margin:30px; /* outer space */
background:#f4f4f4;
}