Border-box

I was just finished watching The box model video, in the end of the video they mention resseting the default box settings of a browser.

Is this always necessary to reset the default settings of a browser when using border-box? and if so, how do i do this? they mentioned a stylesheet en linked it, but how do i make use of this?

Whatever the default style is, we can overwrite it since it has a very low specificity. All a Reset.css file will contain is a list of rules to overwrite the default styles.

We don’t need to go that route if all we’re resetting is one property.

* {
    box-sizing: border-box;
}

The default is content-box which does not include the border width in the width and height of the container. This can mess with our layout calculations if things are really tightly fit together. That is why we would reset it.

However, if it is only meant to apply to a single element, or a class of elements, then write a rule for those elements, and don’t reset the default.