CSS padding

CSS Padding

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

                            .padding-example {
                              padding: 60px;
                            }
                        

                            <p class="padding-example">
                                This element has a padding of 60px on each side
                              </p>
                        

Live preview

This element has a padding of 60px on each side

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

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

The following example sets different padding for all four sides of a <p> element:

                            .padding-example-2 {
                              padding-top: 20px;
                              padding-bottom: 100px;
                              padding-right: 50px;
                              padding-left: 80px;
                            }
                        

                            <p class="padding-example-2">
                                This element has a different padding on each side
                              </p>
                        

Live preview

This element has a different padding on each side

Padding - Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one property.

So, here is how it works:

If the padding property has four values:

• padding: 25px 50px 75px 100px;
  • top padding is 25px
  • right padding is 50px
  • bottom padding is 75px
  • left padding is 100px

                            p {
                              padding: 25px 50px 75px 100px;
                            }