CSS Padding: Padding and Element Width

//in the following example, the <div> element is given a width of 300px;
//however, the actual rendered width of the <div> element will be 350px
//(300px + 25px of left padding + 25px of right padding)

div {
  width: 300px;
  padding: 25px;
}
div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

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.

To keep the width, no matter the amount of padding, you can use the box-sizing property. This causes the element to maintain its width; if you increase the padding, the available content space will decrease.

CSS Padding: Padding and Element Width — Structure map

Clickable & Draggable!

CSS Padding: Padding and Element Width — Related pages: