CSS Padding

What is CSS Padding?

CSS Padding is used to create space inside an element, between the content and its border.

Padding increases the inner spacing of an element without affecting the space outside the element.

• Add space inside elements
• Improve text readability
• Create better UI spacing
• Part of the CSS Box Model

Padding and the CSS Box Model

The CSS Box Model consists of:

• Content
• Padding
• Border
• Margin

Padding sits between content and border.

Basic Padding Example

The simplest way to add padding is using a single value.

.box {
    padding: 20px;
}

                

This adds equal padding on all four sides.

Padding for Individual Sides

You can control padding separately for each side.

• padding-top
• padding-right
• padding-bottom
• padding-left

.box {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

                

Padding Shorthand Property

Padding shorthand allows writing padding in a compact way.

/* All sides */
padding: 20px;

/* Top-Bottom | Left-Right */
padding: 10px 20px;

/* Top | Left-Right | Bottom */
padding: 10px 20px 30px;

/* Top | Right | Bottom | Left */
padding: 10px 20px 30px 40px;

                

Padding with Width and Height

Padding increases the total size of an element.

.box {
    width: 200px;
    padding: 20px;
}

                

Actual width becomes: 200px + left padding + right padding.

Padding and Box-Sizing

To prevent padding from increasing element size, use box-sizing: border-box;

.box {
    width: 200px;
    padding: 20px;
    box-sizing: border-box;
}

                

Common Use Cases of Padding

• Buttons spacing
• Card layouts
• Navigation menus
• Text readability

Common Padding Mistakes

• Confusing padding with margin
• Ignoring box-sizing
• Using excessive padding

Best Practices for CSS Padding

• Use padding for internal spacing
• Combine with margin wisely
• Prefer shorthand for clean code
• Use consistent spacing values