Web | This Site

CSS Beginners
CSS Advanced
CSS References
CSS Resources
Selected Reading
© 2011 TutorialsPoint.COM

| Home |  | References |  | Discussion Forums |  | About TP

# CSS - Paddings

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

To Become more comfortable - Do Online Practice

# 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

To Become more comfortable - Do Online Practice

# 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

To Become more comfortable - Do Online Practice

# 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

To Become more comfortable - Do Online Practice

# 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

To Become more comfortable - Do Online Practice

Advertisement

Online Image Processing

Indian Baby Names