CSS Padding

Padding

Padding is the space between an element’s content and its border. It creates breathing room inside the element.

<div class="no-padding">No padding</div>
<div class="padding">With padding</div>
<div class="uneven">Uneven padding</div>

div { width: 200px; border: 2px solid #6366f1; margin: 4px 0; background: #eef2ff; }
.no-padding { padding: 0; }
.padding { padding: 20px; }
.uneven { padding: 10px 30px; }

Padding Shorthand

/* All four sides */
padding: 10px;

/* top/bottom | left/right */
padding: 10px 20px;

/* top | left/right | bottom */
padding: 10px 20px 15px;

/* top | right | bottom | left */
padding: 10px 15px 20px 25px;

Individual Properties

Padding is inside the border - it increases the element’s total visible size unless box-sizing: border-box is used.