CSS Padding

padding is transparent space inside an element's border, between the border and the content. Unlike margin, padding never collapses and (without a background) is visually indistinguishable from margin — but the two are not interchangeable: padding is part of the clickable/ background area, margin is not.

.box {
  padding-top: 16px;
  padding-right: 12px;
  padding-bottom: 16px;
  padding-left: 12px;
}

Shorthand

Same order as margin's shorthand:

.a { padding: 16px; }
.b { padding: 16px 12px; }        /* top/bottom  left/right */
.c { padding: 16px 12px 24px; }   /* top  left/right  bottom */
.d { padding: 16px 12px 24px 4px; } /* top right bottom left */

A button with only color and background set but no padding will hug its text tightly — padding is usually the first thing that makes an element feel "designed" rather than raw.