Padding

The padding is the area between the content and the border. The single characteristic you can set for the padding element is size. The 5 width properties of padding are given below.

The possible values are:

ValuesDescription
padding-top
padding-right
padding-bottom
padding-left
padding


Then possible values for these properties are

ValuesDescription
<length>a fixed width. Only 0 or positive values are valid.
<percentage>specifies the width relative to parent element.
inheritthe property is inherited from the parent.


snippet
<html>
<head>
<style>
p {
padding-top:10px;
padding-right:25px;
padding-bottom:20px;
padding-left:50px;
background:#aed7f5;
}

div { padding-top:10cm;
padding-right:1cm;
padding-bottom:2pc;
padding-left:5mm;
background:#f1aef5;}
</style>
</head>
<body>
<p> Never cry for the person who hurts you. Just smile and say,
thanks for giving me a chance to find someone better than you. </p>
<div> Never cry for the person who hurts you. Just smile and say,
thanks for giving me a chance to find someone better than you. </div>
</body>
</html>

Padding shorthand
The padding property can accept up to 4 space delimited values.

For example

DeclarationDescription
padding : 1pxtop=right=bottom=left=1px
padding : 1px 2pxtop=right=1px, bottom=left=2px
padding : 1px 2px 3pxtop=1px, right=left=2px, bottom=3px
padding : 1px 2px 3px 4pxtop=1px, right=2px, left=3px, bottom=4px

snippet
<html>
<head>
<style>
p {padding:10px 25px 20px 50px;
background:#aed7f5;
}
div {padding-top:10cm 1cm 2pc 5mm;
background: #f1aef5;}
</style>
</head>
<body>
<p> Never cry for the person who hurts you. Just smile and say,
thanks for giving me a chance to find someone better than you. </p>
<div> Never cry for the person who hurts you. Just smile and say,
thanks for giving me a chance to find someone better than you. </div>
</body>
</html>
Related Tutorial
2. Padding

3. Margin
4. Border
5. Cursors