Padding and borders inside the element’s width

When using percent to define the width of an element, together with padding or borders, the actual size of that element is bigger than expected.

That is because its width is now: percentage + (border/+padding). To avoid that, the following code can be used:

-webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */Code language: JavaScript (javascript)
Tags