CSS/Properties/padding

From W3C Wiki
Jump to: navigation, search

padding

The padding property is a shorthand property for setting 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' at the same place in the style sheet.

Description

Values <padding-width>{1,4} | inherit
Initial value See individual properties
Applies to all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited No


Point, Note

  • Negative values are not allowed.


Values

  • <padding-width>{1,4}
    • padding: 10px 20px;
      top and bottom paddings are 10px, right and left paddings are 20px.
    • padding: 10px 20px 30px;
      top padding is 10px, right and left paddings are 20px, bottom padding is 30px.
    • padding: 10px 20px 30px 40px;
      top padding is 10px, right padding is 20px, bottom padding is 30px, left padding is 40px.


  • inherit
    Takes the same specified value as the property for the element's parent.


And see also individual properties


Example

Example A

[style.css]

 #body{
   background-color: #666;
 }
 p{
   background-color: #ccc;
 }
 #pad{
   padding: 50px 10px;
 }

[index.html]

<body>
  <p>This is a paragraph</p>
  <p id="pad">This is a paragraph</p>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Csslist2 padding.png

CSS Reference

The CSS specification defines the padding property in 8.4 Padding properties.

See also