CSS Padding - Detailed Overview

Introduction to CSS Padding

The padding property in CSS sets the space between the content of an element and its border. Padding is used to create space inside an element and can be applied to all sides of an element.

Padding Width

The padding property sets the padding width for all sides of an element. For example:

div {
    padding: 20px;
    border: 1px solid #ddd;
}

Individual Padding

You can set padding individually for each side of an element using padding-top, padding-right, padding-bottom, and padding-left. For example:

div {
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 25px;
    border: 1px solid #ddd;
}

Padding Shorthand

The padding shorthand property can set padding for all sides at once using one to four values. For example:

div {
    padding: 10px 20px 30px 40px;
    border: 1px solid #ddd;
}

Padding with Percentage

Padding can also be set using percentage values, which are relative to the width of the containing element. For example:

div {
    padding: 5%;
    border: 1px solid #ddd;
}

Padding and Box Model

Padding affects the total size of the box model, pushing the content inward and increasing the overall size of the element. For example:

div {
    width: 100px;
    padding: 20px;
    border: 1px solid #ddd;
}