Designing a new site from scratch?
It would probably be a good idea to include this CSS property in your main CSS/SCSS file:
* {
box-sizing: border-box;
}
This can be further improved by also including ::after and ::before:
*,
::after,
::before {
box-sizing: border-box;
}
You will probably find this setting in most of the sites you visit, and for good reason.
By default, the padding and border of an element are not included in the width and height of elements.
As a result, if we need to set a specific width or height to an element, things can become more complex.
However, this simple box-sizing: border-box setting changes this default behavior, so that the padding and border are included in the width or height of the element.