|
|
|
|
|
|
| |
The padding property (CSS Reference)
Introduction
The padding property can be used to define the padding for
an element. To give all 4 borders different settings you have two
possibilities: The first one is to declare the padding in one definition
separated with a space – something like this:
padding: 10,20,30,40;
If you use it this way, then you have to follow some rules:
|
Amount of paddings:
|
Description:
|
|
1 padding
(padding:10)
|
If you use only one padding, then it will be used for all
four borders.
|
|
2 padding s
(padding: 10,20)
|
The first padding will be used for the top and bottom
border and the second one for the left and right border.
|
|
3 padding s
(margin: 10,20,30)
|
The first padding will be used for the top, the second for
left and right, and the third for the bottom border.
|
|
4 padding s
(padding: 10,20,30,40)
|
The first one will be used for the top, the second one for
right, the third one for bottom, and the fourth for the left border.
|
The second option is to define the paddings with the
sub-properties of margin:
|
Sub-Property:
|
Description:
|
|
padding-bottom
|
Defines the bottom padding.
|
|
padding -left
|
Defines the left padding.
|
|
padding -right
|
Defines the right padding.
|
|
padding -top
|
Defines the top padding.
|
Example
<!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">
<head><title>padding Demonstration</title>
<style type="text/css">
p.padding
{
padding: 20% 20%
20% 20%;
}
</style>
</head>
<body>
<h1><p>padding
demonstration</p></h1>
<p class="padding">This text is aligned with
the help of paddings</p>
</body>
</html>
Output
Values
|
Name:
|
Description:
|
|
length
|
The following values can be also used to define the
padding:
cm (centimeter)
em (ems)
inch (inches)
mm (millimeters)
pc (picas)
px (pixels)
pt (points)
|
|
percentage
|
This value can be used to define the padding with
percentages. You have to use the percentage sign %.
|
|
|
|
|
|
|
|
|
Email TopXML