CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES
SPONSORED LINKS

CSS padding Property

Topic: CSS3 Properties Reference« Prev|Next »

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 usages context and the version history of this property.

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. See animatable properties.
Version: CSS 1, 2, 3

Syntax

The syntax of the property is given with:

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

The example below shows the padding property in action.

  • p.one {
  •     padding: 20px;
  • }
  • p.two {
  •     padding: 35px 15px;
  • }

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

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

Property Values

The following table describes the values of this property.

Value Description
padding-top Sets 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.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element padding property.

Browser Compatibility

The padding property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 4+

Further Reading

See tutorial on: CSS Padding, CSS Box Model.

Related properties: padding-top, padding-right, padding-bottom, padding-left.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.