By default, the width and height of an element:
- width + padding + border = actual width
- height + padding + border = actual height
→ Element often appears bigger because border n padding are added to the specified width and height.
box-sizing: border-box; allows us to include padding & border in an element’s total width n height.
The result of box-sizing: border-box is so much better, so many devs prefer to add this to all elements on pages.
Applying this to all elements is safe and wise:
* {
box-sizing: border-box;
}