Padding

In CSS, padding is the space between the content of an element and its border.

It allows you to create space around an element's content, pushing the content away from the border.

Padding can be specified for each side of an element (top, right, bottom, left) or as a single value to apply the same padding to all sides.

Individual Padding:

We can specify different padding values for each side of an element using the "padding-top", "padding-right", "padding-bottom", and "padding-left" properties.

Example:



    H5 Heading In Box without padding. h5 wrapped inside box div element
    H6 In Box with padding. h6 wrapped inside box div element

Example:

/* Different padding for each side */
h6 {
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 30px;
    padding-left: 15px;
}

Example:

/* Shorthand padding */
h6 {
    padding: 10px; /* Same padding for all sides */
}

h6 {
    padding: 10px 20px; /* Vertical padding (top/bottom) 10px, horizontal padding (right/left) 20px */
}

h6 {
    padding: 10px 20px 30px; /* Top padding 10px, horizontal padding (right/left) 20px, bottom padding 30px */
}

h6 {
    padding: 10px 20px 30px 40px; /* Top 10px, right 20px, bottom 30px, left 40px */
}

Shorthand Padding:

Example:

/* Padding as a percentage */
h6 {
    padding: 5%; /* 5% of the width of the containing block */
}

We can use the shorthand padding property to specify padding for all sides of an element in a single declaration. We can provide one, two, three, or four values.

Percentage Padding:

We can also specify padding values as a percentage of the width of the containing block.

<-- CSS Colors

CSS Margin -->