CSS Padding

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.The padding property allows you to specify how much space should appear between the content of an element and its border

The value of this attribute should be either a length, a percentage, or the word inherit. If the value is inherit, it will have the same padding as its parent element. If a percentage is used, the percentage is of the containing box.

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

Padding - Individual Sides

The following CSS properties can be used to control lists. You can also set different values for the padding on each side of the box using the following properties −

padding-top

padding-right

padding-bottom

padding-left

All the padding properties can have the following values:

length - specifies a padding in px, pt, cm, etc.

% - specifies a padding in % of the width of the containing element

inherit - specifies that the padding should be inherited from the parent element

Example -

div { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; }

Run Example

Padding - Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one property.The padding property is a shorthand property for the following individual padding properties:

padding-top

padding-right

padding-bottom

padding-left

Example -

div { padding: 25px 50px 75px 100px; }

Run Example

The padding-bottom Property

The padding-bottom property sets the bottom padding (space) of an element. This can take a value in terms of length of %.

Example -

<p style="padding-bottom: 15px; border:1px solid black;"> <p style="padding-bottom: 5%; border:1px solid black;">

Run Example

The padding-top Property

The padding-top property sets the top padding (space) of an element. This can take a value in terms of length of %.

Example -

<p style="padding-top: 15px; border:1px solid black;"> <p style="padding-top: 5%; border:1px solid black;">

Run Example

The padding-left Property

The padding-left property sets the left padding (space) of an element. This can take a value in terms of length of %.

Example -

<p style="padding-left: 15px; border:1px solid black;"> <p style="padding-left: 15%; border:1px solid black;">

Run Example

The padding-right Property

The padding-right property sets the right padding (space) of an element. This can take a value in terms of length of %.

Example -

<p style="padding-right: 15px; border:1px solid black;"> <p style="padding-right: 5%; border:1px solid black;">

Run Example

The Padding Property

The padding property sets the left, right, top and bottom padding (space) of an element. This can take a value in terms of length of %.

Example -

<p style="padding: 15px; border:1px solid black;"> <p style="padding:10px 2%; border:1px solid black;"> <p style="padding: 10px 2% 10px; border:1px solid black;"> <p style="padding: 10px 2% 10px 10px; border:1px solid black;">

Run Example