Padding adds space between an element's contents and its border.
You can set padding for individual edges, or use a shorthand padding property to apply values in a single declaration.
The padding properties are listed as follows.
When specifying padding using percentage values, the percentage is always derived from the width of the containing block.
The following code applies Padding to an Element.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!-- w w w . j a v a2s . c om-->
border: 10px double black;
background-color: lightgray;
background-clip: content-box;
padding-top: 0.5em;
padding-bottom: 0.3em;
padding-right: 0.8em;
padding-left: 0.6em;
}
</style>
</head>
<body>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
</body>
</html>The padding property can have from one to four values.
You can use the padding shorthand property to set the padding for all four edges in a single declaration.
You can specify one to four values for this property.
When you supply four values, they are used to set the padding for the top, right, bottom, and left edges, respectively.
padding: 2px 5px 7px 9px;
top padding is 2px
right padding is 5px
bottom padding is 7px
left padding is 9px
padding: 2px 5px 7px;
top padding is 2px
right and left paddings are 5px
bottom padding is 7px
padding: 2px 5px;
top and bottom paddings are 2px
right and left paddings are 5px
padding: 2px;
all four paddings are 2px
| Property | Description | CSS |
|---|---|---|
| padding-bottom | Set padding for bottom | 1 |
| padding-left | Set left padding | 1 |
| padding-right | Set right padding | 1 |
| padding-top | Set top padding | 1 |
| padding | Padding shorthand property settings | 1 |