Understanding CSS box-sizing: border-box
By default, when you set a width or height on an element, it only applies to the content area. The padding, border, and margin are added on top of this width or height. For example, if you set the following CSS on a <p> element: p { width: 100px; padding: 10px; border: 10px solid black; margin: 10px; } The browser will render it like this: However, you can change this behavior by using the box-sizing property....