12. Box Model Deep Dive: Padding

Padding controls the space between the content and the border of an element. It is internal space, serving as a buffer inside the box.

Setting Padding

Padding can be set for all four sides simultaneously or individually.

1. Individual Properties

css .box { /* Sets only the top padding / padding-top: 20px; / Sets only the right padding / padding-right: 15px; / Sets only the bottom padding / padding-bottom: 20px; / Sets only the left padding */ padding-left: 15px;

background-color: lightgray; /* Padding is transparent, but shows background */ }

2. Shorthand Syntax

Shorthand allows you to define multiple sides in one property. The order follows a clockwise direction: Top, Right, Bottom, Left (TRBL).

css /* 4 values: Top 10px, Right 20px, Bottom 15px, Left 5px */ .box-4 { padding: 10px 20px 15px 5px; }

/* 2 values: Top/Bottom 10px, Left/Right 20px */ .box-2 { padding: 10px 20px; }

/* 1 value: All four sides 15px */ .box-1 { padding: 15px; }

Padding and Background

Crucially, padding always takes the background color of the element. If you set background-color: blue, the padding area will also be blue, visually containing the content.