CSS Padding and box-sizing

The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element ( the box model ).

So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.

The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not.

The box-sizing property can have the following values:

• content-box - This is default. The width and height properties includes only the content (border and padding are not included)
• border-box - The width and height properties includes content, padding and border

So, to keep the width at 300px, no matter the amount of padding, you can use the box-sizing: border-box; . This causes the element to maintain its actual width; if you increase the padding, the available content space will decrease.