top, bottom, left, and right paddings


padding-***: ***;

Browser
Internet Explorer Firefox Opera

The padding-*** property sets the top, bottom, left, and right paddings of an element.
(*** = top, bottom, left, and right)


div {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}


Property Value Explanation
padding-top length, %, or auto the top padding
padding-right length, %, or auto the right padding
padding-bottom length, %, or auto the bottom padding
padding-left length, %, or auto the left padding

Example

<html>
<head>
<title>TAG index</title>

<style type="text/css">

p {
width: 200px;
background-color: #85b9e9;
padding-top: 20px;
padding-bottom: 50px;
}

</style>

</head>
<body>

<p>The top padding:20px, The bottom padding:50px</p>

</body>
</html>
Output

The top padding:20px, The bottom padding:50px