Fork me on GitHub

Fix Element Sizing with CSS Border Box

By default, an element size does not include the border or padding. With Border Box, the element padding and border is included in its size.

We can apply Border Box to all elements (and pseudo elements), by using this CSS:


*, *::before, *::after {
    box-sizing: border-box;
}
		

Sources:

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#Browser_compatibility