Skip to main content

Visit Mozilla.org

CSS:padding

From MDC

« CSS Reference

[edit] Summary

padding property of an element set the padding space required on all side of an element. Padding area is the space between the content of the element and its border. padding property is used a shortcut to avoid setting each side separately. Negative values are not allowed.

  • Initial value: 0
  • Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
  • Inherited: no
  • Percentages: refer to height or width of closest block-level ancestor
  • Media: visual
  • Computed value: the percentage as specified or the absolute length

[edit] Syntax 

padding: { <length> | <percentage> | inherit | auto }{1,4} ;

[edit] Values

<length>
Specifies a fixed height or width.
<percentage>
a percentage with respect to the height or width of the containing block.
  • If there is only one value, it indicate all four sides
  • when there are two values first one indicates top and bottom, second one indicates left and right.
  • when there are three values first one indicate top, second one indicates left and right, third one indicate bottom.
  • when there are for values first one indicate top, second one indicates right, third one indicate bottom, fourth indicates left.

[edit] Examples

View Live Examples 

.content {
  padding: 5%;         /* on all sides 5% padding       */
}

.sidebox {
  padding: 10px;       /* on all sides 10px padding     */
} 

.rightbox {
  padding: 10px 20px;  /*  top and buttom 10px padding  */
}                      /*  left and right 20px padding  */


.leftbox {                /*  top 10px padding          */
  padding: 10px 3% 20px;  /*  left and right 3% padding */
}                         /*  buttom 20px padding       */


.mainbox {                    /*  top 10px padding     */
  padding: 10px 3px 30px 5px; /*  right 3px padding    */
}                             /*  buttom 30px padding  */
                              /*  left 5px padding     */

[edit] Notes

[edit] Specifications

[edit] Browser compatibility

(FIXME)

Browser Lowest Version
Internet Explorer ?
Firefox ?
Netscape ?
Opera ?
Safari ?

[edit] See also

padding, padding-bottom, padding-left, padding-right, padding-top, -moz-padding-start, -moz-padding-end, border, margin

Retrieved from "http://developer.mozilla.org/en/docs/CSS:padding"