The Wonder of CSS Padding

The padding property controls the space inside an element, between its content and its border.

Setting Padding

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

/* Top/bottom and left/right */
.card { padding: 1rem 2rem; }

/* Top, left/right, bottom */
.card { padding: 0.5rem 1rem 1.5rem; }

/* Top, right, bottom, left (clockwise) */
.card { padding: 10px 20px 10px 20px; }

Individual Sides

.card {
    padding-top: 2rem;
    padding-right: 1.5rem;
    padding-bottom: 2rem;
    padding-left: 1.5rem;
}

Padding vs Margin

• Padding is inside the border — it has the element's background color
• Margin is outside the border — it's transparent
• Padding never collapses (unlike margin)
• Padding cannot be negative

Practical Examples

/* Button with proper padding */
.btn {
    padding: 0.75rem 1.5rem;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
}

/* Card component */
.card {
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Section with generous padding */
section {
    padding: 4rem 2rem;
}