CSS Padding

CSS Padding

Are used to generate space around an element's content, inside of any defined borders.

There are properties for setting the padding for each side of an element (top, right, bottom, and left).

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 — Structure map

Clickable & Draggable!

CSS Padding — Related pages: