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;
                            }
                        

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.