CSS Padding

CSS padding is used to create space inside an element, between its content and its border. Padding adds space inside the element and does not affect the positioning of other elements outside of it.

Padding Properties

The `padding` property allows you to set the padding for all sides of an element or individually for each side.

Padding Shorthand

The `padding` shorthand property sets the padding for all four sides in one declaration. You can provide one, two, three, or four values.

/* Padding shorthand examples */
.box {
    padding: 10px; /* All sides */
}

.card {
    padding: 10px 20px; /* Vertical | Horizontal */
}

.container {
    padding: 10px 20px 30px; /* Top | Horizontal | Bottom */
}

.header {
    padding: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */
}

        

Individual Padding Properties

You can set padding individually for each side of an element using the following properties:

/* Individual padding properties */
.padding-top {
    padding-top: 15px; /* Top padding */
}

.padding-right {
    padding-right: 20px; /* Right padding */
}

.padding-bottom {
    padding-bottom: 25px; /* Bottom padding */
}

.padding-left {
    padding-left: 30px; /* Left padding */
}

        

Padding and Box Model

Padding affects the size of an element. It is included in the total width and height of the element. Understanding the box model is essential when working with padding.

/* Box model example */
.box-model {
    width: 200px;
    padding: 20px;
    border: 1px solid #ddd;
}