css - padding

The padding property allows you to specify how much space should appear between the content of an element and its border:

There are following five CSS properties which can be used to control lists:

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.

You can also set different values for the padding on each side of the box using the following properties:

  • The padding-bottom Specifies the bottom padding of an element.

  • The padding-top Specifies the top padding of an element.

  • The padding-left Specifies the left padding of an element.

  • The padding-right Specifies the right padding of an element.

  • The padding Serves as shorthand for the preceding properties.

Now we will see how to use these properties with examples.

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 %.

Here is the example:


<p style="padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>

<p style="padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
</p>

This will produce following result:

This is a paragraph with a specified bottom padding

This is another paragraph with a specified bottom padding in percent

 

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 %.

Here is the example:


<p style="padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>

<p style="padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding in percent
</p>

This will produce following result:

This is a paragraph with a specified top padding

This is another paragraph with a specified top padding in percent

 

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 %.

Here is the example:


<p style="padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>

<p style="padding-left: 15%; border:1px solid black;">
This is another paragraph with a specified left padding in percent
</p>

This will produce following result:

This is a paragraph with a specified left padding

This is another paragraph with a specified left padding in percent

 

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 %.

Here is the example:


<p style="padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>

<p style="padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
</p>

This will produce following result:

This is a paragraph with a specified right padding

This is another paragraph with a specified right padding in percent

 

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 %.

Here is the example:

<p style="padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>

<p style="padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right padding will be 2% of the total width of the document.
</p>

<p style="padding: 10px 2% 10px; border:1px solid black;"> top padding will be 10px, left and right padding will be 2% of the total width of the document, bottom padding will be 10px </p>

<p style="padding: 10px 2% 10px 10px; border:1px solid black;"> top padding will be 10px, right padding will be 2% of the total width of the document, bottom padding and top padding will be 10px
</p>

This will produce following result:

all four paddings will be 15px

top and bottom paddings will be 10px, left and right paddings will be 2% of the total width of the document.

top padding will be 10px, left and right padding will be 2% of the total width of the document, bottom padding will be 10px

top padding will be 10px, right padding will be 2% of the total width of the document, bottom padding and top padding will be 10px



Spacer Bottom Left Corner ImageBottom Right Corner Image
Valid XHTML 1.0 Strict  Valid CSS! Check the accessibility of this site according to U.S. Section 508