YouTipThe Box Model
Every element is a box: content, padding, border, margin.
.box {
width: 300px;
padding: 20px;
border: 2px solid black;
margin: 10px;
box-sizing: border-box; /* includes padding+border in width */Margin Collapse
Vertical margins between adjacent elements collapse to the larger value.
Summary
- box-sizing: border-box simplifies width calculations
- Padding is inside the border, margin is outside