(10) Learn the Padding property of CSS

Browser support

All browsers support the Padding property.

Note: The property value "Inherit" is not supported by any version of Internet Explorer (including IE8).

Definition and usage

The padding shorthand property sets all padding properties in a declaration.

Description

This shorthand property sets the width of all inner margins of the element, or sets the width of the padding on each edge. The padding that is set on the inline non-replacement element does not affect the row height calculation, so if an element has both an inner margin and a background, it may visually extend to other rows and may overlap with other content. The background of the element extends through the inner margin. You are not allowed to specify a negative margin value.

Note: Negative values are not allowed.

Example 1

padding:10px 5px 15px 20px;

• Top padding is 10px
• Right inner margin is 5px
• The lower padding is 15px
• Left margin is 20px

Example 2

padding:10px 5px 15px;

• Top padding is 10px
• Right padding and left padding are 5px
• The lower padding is 15px

Example 3

padding:10px 5px;

• Top padding and bottom padding are 10px
• Right padding and left padding are 5px

Example 4

padding:10px;

• All 4 internal margins are 10px

value describes the inner margin that the        auto     Browser calculates. Length   Specifies the value of the padding in a specific unit, such as pixels, centimeters, and so on. The default value is 0px. % Specifies the padding         based on the percentage of the parent element's width. Inherit  specifies that the inner margin should be inherited from the parent element. 

Default value: 0.

(10) Learn the Padding property of CSS