The box-sizing Property

Defines how the width and height of an element are calculated: should they include padding and borders, or not.

box-sizing: content-box (default):

Width and height only apply to the content of the element:

This div has a width of 300px. But the full width is 300px + 20px (left and right border) + 60px (left and right padding) = 380px!

box-sizing: border-box:

Width and height apply to all parts of the element: content, padding and borders:

Here, the full width is 300px, no matter what!

t

Og her er en tabel på 300px i bredden.