CSS Box Model
width: 200px;
height: 100px;
padding: 10px;
margin: 20px;
border: 2px solid black;
1. width: 200px;
- Sets the content width of the element to 200 pixels.
- It does not include padding, margin, or border.
2. height: 100px;
- Sets the content height to 100 pixels.
- Like
width, it does not include padding, margin, or border.
3. padding: 10px;
- Adds space inside the element, between the content and the border.
- It increases the total size of the element.
- Example: If
width: 200pxandpadding: 10px, the actual width becomes 220px (200px + 10px left + 10px right).
4. margin: 20px;
- Adds space outside the element, creating separation from other elements.
- It does not affect the element’s actual size, only its position.
5. border: 2px solid black;
- Adds a 2-pixel thick solid black border around the element.
- The border adds to the element’s total size.
Total Element Size (Box Model Calculation)
By default, the content-box model is used, meaning the total size is calculated as:
Total Width = width + left padding + right padding + left border + right border
Total Height = height + top padding + bottom padding + top border + bottom border
For the given example:
- Width =
200px + 10px + 10px + 2px + 2px = 224px - Height =
100px + 10px + 10px + 2px + 2px = 124px
If box-sizing: border-box; is applied, then width and height include padding and border, keeping the total size fixed.
Example
.box {
width: 200px;
height: 100px;
padding: 10px;
margin: 20px;
border: 2px solid black;
background-color: black;
}
📌 This will create a box with:
black background
200px width and 100px height (content area)
10px padding inside
20px margin outside
2px solid black border