4 min read
•Question 1 of 49easyWhat is the CSS Box Model?
Understanding the CSS box model concept.
What You'll Learn
- Box model components
- Width calculations
- box-sizing property
The CSS Box Model
Every HTML element is wrapped in a box with four parts:
| Part | Description |
|---|---|
| Content | The actual content (text, images) |
| Padding | Space between content and border |
| Border | A border around the padding |
| Margin | Space outside the border |
Example
styles.cssCSS
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
/* Total width = 200 + 40 + 10 + 20 = 270px */box-sizing
styles.cssCSS
.box {
box-sizing: border-box;
width: 200px; /* Total width stays 200px */
}