Padding

Padding is the cushion inside the box. It pushes the content away from the edges so text does not press right up against the border.

Padding Shorthand

Just like margin, padding uses the same shorthand pattern:

/* All sides */
.box { padding: 20px; }

/* top/bottom left/right */
.box { padding: 10px 20px; }

/* top right bottom left */
.box { padding: 10px 15px 20px 25px; }

Same clockwise order: top, right, bottom, left.

Individual Properties

One side at a time:

.box {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 25px;
}

Padding vs Margin

This confuses everyone. Here is the simple difference:

• Padding is inside the border. It creates space between the content and the border.
• Margin is outside the border. It creates space between this element and other elements.

If you give an element a background color, padding shows that background color. Margin is always transparent.

.card {
  background: #f0f0f0;
  padding: 20px;  /* the background stretches through the padding */
  margin: 20px;   /* the margin is clear — no background */

Think of padding as the cushion inside your house, and margin as the yard outside. Both give you space, but one is inside your property line.