1
HTML/CSSBeginner#css#pseudo-classes
HTML/CSSBeginner#css#box-model
What is the box-sizing property and why is border-box generally preferred?
box-sizing: border-box makes width/height include padding and border, so adding padding doesn't unexpectedly grow the element beyond its declared size — matching how most developers intuitively expect sizing to work, unlike the default content-box.
Example
*, *::before, *::after { box-sizing: border-box; }
.box { width: 300px; padding: 20px; border: 2px solid; } /* still 300px wide total */