How to set all padding properties in one declaration in CSS

When all 4 padding values are specified in one CSS declaration, the values are specified in a clockwise order beginning with the top value. The first value refers to the top side, the second value refers to the right side, the third value refers to the bottom side and the fourth value refers the right side.

The code below shows you how to set all padding properties in one declaration in CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Web Development Tutorials.com</title>

<style type="text/css">
p.one
{
padding: 0;
border: thin solid #000;
}
p.two
{
padding: .5cm 1cm 2cm 4cm;
border-style: solid;
}
</style>

</head>
<body>
<p class="one">
This paragraph has a padding of 0. This paragraph has a padding of 0.
</p>
<p class="two">
This paragraph has a top padding of ".5cm", a right padding of "1cm", a bottom padding of "2cm" and a left padding of "4cm".
</p>
<p class="one">
This paragraph has a padding of 0. This paragraph has a padding of 0.
</p>
</body>
</html>

The code above creates the paragraphs below.

This paragraph has a padding of 0. This paragraph has a padding of 0.

This paragraph has a top padding of ".5cm", a right padding of "1cm", a bottom padding of "2cm" and a left padding of "4cm".

This paragraph has a padding of 0. This paragraph has a padding of 0.

Use the text editor below to practice what you have learned.

Free Website Templates

Free Web Tools

Recommended Websites