CSS Padding

CSS padding specifies the space around an element inside the border. The difference of padding and margin is that the margin properties specifiy space outside the border whereas the padding properties specify space inside the border. By using CSS padding properties you can easily use space inside the border of a element. You can't use the negative values in the padding properties.
Here are the CSS padding proerties:

  • padding-top - Specifies the padding at the top of an element.
  • padding-bottom - Specifies the padding at the bottom of an element.
  • padding-left - Specifies the padding at the left of an element.
  • padding-right - Specifies the padding at the right of an element.
  • padding - It is a shorthand way to declare the other padding properties.

Values Using for padding Properties

  1. length - The padding vaules can be defined by px, cm, pt etc.
  2. percentage(%) - The padding can be defined by percentage.
  3. inherit - The padding values will be inherited by the parent element.

Example Using All Sides padding

Example:

h1 {
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 50px;
  padding-right: 50px;
}

Run Example

The padding Property

It is a shorthand property. You can define all the padding proerties in one line by using padding property. the are several way to use the padding property.

If the padding property contains four values. Then the order will be:

  1. padding-top
  2. padding-right
  3. padding-bottom
  4. padding-left

Example:

h1 {
  padding: 50px 30px 60px 20px;
}

Run Example

In the example:

  • padding-top: 50px
  • padding-right: 30px
  • padding-bottom: 60px
  • padding-left: 20px

If the padding property contains three values. Then the order will be:

  1. padding-top
  2. padding-right and padding-left
  3. padding-bottom

Example:

h1 {
  padding: 50px 30px 60px;
}

Run Example

In the example:

  • padding-top: 50px
  • padding-right, padding-left: 30px
  • padding-bottom: 60px

If the padding property contains two values. Then the order will be:

  1. padding-top and padding-bottom
  2. padding-right and padding-left

Example:

h1 {
  padding: 50px 30px;
}

Run Example

In the example:

  • padding-top, padding-bottom: 50px
  • padding-right, padding-left: 30px

If the padding property contains one value then all four paddings get the same value.

Example:

h1 {
  padding: 50px;
}

Run Example

In the example:

  • padding-top, padding-bottom, padding-right, padding-left: 50px

Recommended Posts:

Related Tags: HTML Basics, CSS Basics, Bootstrap