CSS Padding

What is Padding?

Padding is used to create space inside an element, between the content and the border. It is part of the CSS box model.

Padding Properties

Individual Sides

div {
    padding-top: 20px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 15px;
}

Shorthand - All Sides

div {
    padding: 20px;  /* All sides */
}

Shorthand - Vertical and Horizontal

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

Shorthand - All Four Sides

div {
    padding: 10px 20px 30px 40px;  /* top right bottom left */
}

Padding vs Margin

• Padding: Space inside the element (between content and border)
• Margin: Space outside the element (between elements)

.box {
    padding: 20px;    /* Space inside */
    margin: 10px;    /* Space outside */
    border: 2px solid #4b3190;
}