CSS padding

      No Comments on CSS padding

The CSS padding properties are used to have spaces between the element and its container.Unlike margins padding do not provide space between two elements. they provide space between an elopement and its border. CSS lets one specify padding for each element in any way one wants..

Example:

I am a div

CSS padding individual sides

CSS defines property to apply padding to specific sides.

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

The padding property 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

Example:

div 
{
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
I am a div

Padding shorthand property

The padding property can be specified in many ways:-

  1. If padding has four values:
    padding:20px 10px 25px 30px

    • top padding is 20px
    • right padding is 10px
    • bottom padding is 25px
    • left padding is 30px
  2. If padding has three values:
    padding:20px 10px 25px

    • top padding is 20px
    • right and left paddings are 10px
    • bottom padding is 25px
  3. If padding has two values:
    padding:20px 10px

    • top and bottom paddings are 20px
    • right and left paddings are 10px
  4. If padding has one values:
    padding:20px

    • all paddings are 20px

Leave a Reply

Your email address will not be published. Required fields are marked *