CSS Padding

1) Padding Shorthand

.card {
  padding: 20px;            /* all sides */
  padding: 10px 20px;        /* top/bottom 10, left/right 20 */
  padding: 5px 10px 15px;     /* top 5, lr 10, bottom 15 */
  padding: 5px 10px 15px 20px; /* top right bottom left */
}

2) Individual Sides

.panel {
  padding-top: 16px;
  padding-right: 8px;
  padding-bottom: 16px;
  padding-left: 8px;
}

3) Padding Expands Background

.notice {
  background-color: #fff3e0;
  padding: 12px;
}

Unlike margin, padding becomes part of the element’s background area.

4) Padding & Element Size (box-sizing)

/* Default: content-box (padding adds to width/height) */
.box {
  width: 200px;
  padding: 20px;  /* final width = 240px */
}

/* border-box: padding is included inside width/height */
.box-border {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;  /* final width = 200px */
}

Tip: Many projects set * { box-sizing: border-box; } globally for easier layouts.

5) Improve Clickable Area

.btn {
  padding: 10px 16px;
  border-radius: 6px;
}

6) Padding vs Margin

.example {
  background: #e3f2fd;
  margin: 12px;   /* outside space */
  padding: 12px;  /* inside space (colored) */
}

7) Padding on Inline Elements

/* Inline elements accept padding, but vertical padding may not push line height as expected */
span.tag {
  padding: 2px 8px;
  border-radius: 9999px;
  background: #fce4ec;
}

For more control, use display:inline-block or display:flex.