box-sizing allows taking account padding and border when calculating element height and width.

Consider using box-sizing: border-box as it eliminates most pitfalls with paddings and borders with rules like width: 100%. All major browsers support it so it can be used without problems.

html {
    box-sizing: border-box;
}

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

But using border box sizing only on the content you need is fine too.

If you have third party styles, you can specify them to use the old content box.

.component {
    /* designed to work in default box-sizing */
    /* in your page, you could reset it to normal */
    box-sizing: content-box;
}

Sources

• Inheriting box-sizing Probably Slightly Better Best-Practice