CSS Padding

Padding means the space between the content of an element and it's border. There are many properties in CSS by which you can define the space between the border of an element and it's content. These properties can take a value in units or in percentage. We will discuss these properties here.

Set Top Padding

The padding-top property allows us to set the top padding of an element.
Example:

<html>
<head>
<style type="text/css">
div.top {border: 1px solid; padding-top: 20px}
p.top {border: 1px solid; padding-top: 1cm}
</style>
</head>

<body>
<div class="top">This division has top padding of 20 px</div>
<p class="top">This paragraph has top padding of 1 cm</p>
</body>
</html>

Output:

This division has top padding of 20 px

This paragraph has top padding of 1 cm

Set Right Padding

The padding-right property will set the right padding of the element.
Example:

<html>
<head>
<style type="text/css">
div.right {border: 1px solid; padding-right: 5cm}
p.right {border: 1px solid; padding-right: 50px}
</style>
</head>

<body>
<div class="right">This division has right padding of 5 cm</div>
<p class="right">This paragraph has right padding of 50 px</p>
</body>
</html>

Output:

This division has right padding of 5 cm

This paragraph has right padding of 50 px

Set Bottom Padding

By using padding-bottom property, bottom padding can be set. Example:

<html>
<head>
<style type="text/css">
div.bottom {padding-bottom: 10%}
</style>
</head>

<body>
<div class="bottom">This division has bottom padding of 10%</div>
</body>
</html>

Output:

This division has bottom padding of 10%

Set Left Padding

You can set left padding of an element by using padding-left property.
Example:

<html>
<head>
<style type="text/css">
p.left {padding-left: 1cm}
</style>
</head>

<body>
<p class="left">This paragraph has left padding of 1 cm</p>
</body>
</html>

Output:

This paragraph has left padding of 1 cm

Set All Padding in a Single Command

All the padding properties can be set by using a single command, padding.
Example:

<html>
<head>
<style type="text/css">
p.one {border: solid 1px; padding: 1.5cm}
p.two {border: solid 1px; padding: 0.5cm 2.5cm}
p.three {border: solid 1px; padding: 10px 2% 15px}
p.four {border: solid 1px; padding: 10px 2% 15px 20px}
</style>
</head>

<body>
<p class="one">This paragraph has 1.5 cm padding on all sides</p>
<p class="two">This paragraph has 0.5 cm top, bottom padding; 2.5 cm right, left padding.</p>
<p class="three">This paragraph has 10 px top padding; 2% right and left padding; 15 px bottom padding</p>
<p class="four">This paragraph has 10 px top padding; 2% right padding; 15 px bottom padding; 20 px left padding</p>
</body>
</html>

Output:

This paragraph has 1.5 cm padding on all sides

This paragraph has 0.5 cm top, bottom padding; 2.5 cm right, left padding.

This paragraph has 10 px top padding; 2% right and left padding; 15 px bottom padding

This paragraph has 10 px top padding; 2% right padding; 15 px bottom padding; 20 px left padding

CSS Tutorial

CSS Padding

Set Top Padding

Set Right Padding

Set Bottom Padding

Set Left Padding

Set All Padding in a Single Command

'w3reference : Learn by examples ... Advanced to beginner's tutorials ...'