CSS Padding

Padding means the space between the content and its border or space around an element’s content, inside of any defined borders.

Padding – Individual Sides

CSS padding has different properties for each sides. So we can define padding for each side.

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

All the padding properties can have the following values:

All the padding properties can have the following values:

  • length – specifies a padding in px, pt, cm, etc.
  • % – specifies a padding in % of the width of the containing element
  • inherit – specifies that the padding should be inherited from the parent element

Tip: Negative values are allowed.

See the Pen padding by Arpit (@soniarpit) on CodePen.

Padding – Shorthand Property

Instead writing individual properties for each side, you can also write it in one line.

The padding property is a shorthand property for the following individual margin properties:

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

So, here is how it works:

If the margin 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

If the padding property has three values:

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

If the padding property has two values:

  • padding: 25px 50px;
    • top and bottom padding are 25px
    • right and left padding are 50px

If the padding property has one value:

  • margin: 25px;
    • all four padding are 25px

Previous: CSS Margins

Next: CSS Lists

Leave a Comment

Copy link
Powered by Social Snap