CSS padding Property

The padding property sets the required padding space on one to four sides of an element. The padding area is the space between an element and its border. Negative values are not allowed but decimal values are permitted. The padding property is a shorthand to avoid setting each side separately padding-top, padding-right, padding-bottom, padding-left.

Formal syntax: [ <length> | <percentage> ]{1,4}

padding: 5px;
padding: 5px 10px;
padding: 5px 10px 8px;
padding: 5px 10px 8px 4px;

• <length>Specifies a non-negative fixed width.
• <percentage>A percentage relative to the width of the containing block. Negative values not are allowed.
  
  Can have between 1 to 4 values:
  1 value, all 4 sides have the same padding.
  2 values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second.
  3 values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third.
  4 values, they apply to the top, right, bottom, and left, respectively.

.class1 {padding: 10px;}
/* All sides have 10px padding */

.class2 {padding: 10px 5px;}
/* Top and Bottom have 10px padding, Left and Right have 5px padding */

.class3 {padding: 10px 5px 3px;}
/* Top has 10px padding, Left and Right have 5px padding, Bottom has 3px padding */

.class4 {padding: 10px 5px 3px 8px;}
/* Top has 10px padding, Right has 5px padding, Bottom has 3px Padding, Left has 8px padding */

Click the button below to experiment with this property.

Give it a Try!

1+

6+

1+

1+

8+

• Share on Facebook
• Share on Twitter
• Share on Google+