padding - HTML CSS CSS Property

HTML CSS examples for CSS Property:padding

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. padding

Description

The padding CSS property sets the padding on all four sides of the element.

It is a shorthand property for padding-top, padding-right, padding-bottom, and padding-left property.

The following table summarizes the padding Property.

Item Value
Default value: 0
Applies to:All elements except <tbody>, <thead>, <tfoot>, <tr>, <colgroup> and <col>. It also applies to ::first-letter.
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 

padding:      [ length | percentage] 1 to 4 values | initial | inherit

This shorthand notation can take one, two, three, or four whitespace separated values.

  • If one value is set, this padding sets all 4 sides.
  • If two values are set, the first value sets top and bottom, the second value sets the right and left side.
  • Three values set the top, horizontal (right and left) and bottom side.
  • Four values set to the top, right, bottom, left side in that order.

Property Values

The following table describes the values of this property.

Value Description
padding-topSets the padding to the top side of an element.
padding-right Sets the padding to the right side of an element.
padding-bottom Sets the padding to the bottom side of an element.
padding-left Sets the padding to the left side of an element.
initialSets this property to its default value.
inherittake the value of its parent element padding property.

The example below shows the padding property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS padding property</title>
  <style type="text/css">
    p {<!--from w w  w .java2 s .c om-->
      background: #f0e68c;
    }
    p.one {
      padding: 20px;
    }
    p.two {
      padding: 35px 15px;
    }
    p.three {
      padding: 20px 100px 50px;
    }
    p.four {
      padding: 10px 30px 50px 150px;
    }
    </style>
 </head>
 <body>
  <p>This is a normal paragraph.</p>
  <p class="one">This paragraph has equal padding of 20px on all sides.</p>
  <p class="two">This paragraph has a top and bottom padding of 35px and a left and right padding of 15px.</p>
  <p class="three">This paragraph has a top padding of 20px, left and right padding of 100px and a bottom padding of 50px.</p>
  <p class="four">This paragraph has a top padding of 10px, right padding of 30px, bottom padding of 50px and a left padding of 150px.</p>
 </body>
</html>

Related Tutorials