Quick Reach
The padding property of CSS
The padding and margin properties add spaces in the specified HTML elements. The CSS padding property adds space between the content and border of the specified HTML element.
See a padding example by single declaration
To set the padding of HTML elements, you can use the padding property with one value to apply in all directions. That means the space between the content of the element and its border will be applied equally in the left, right, top and bottom.
This method would be referred as shorthand or defining padding by single declaration.
A padding example with separate declaration
Alternatively, you may use the padding property individually for each direction. The syntax and examples of using padding in both ways are given below, so keep reading.
How to define CSS padding
The basic syntax of padding is:
padding: 10px;
Where 10px is the length value that can be in px, pt, cm etc.
The padding can also be set individually for each direction as given below:
padding-left: 10px;
padding-right: 10pts;
padding-top: 2cm;
padding-bottom: 10px
Set padding with single value example
This example uses the padding CSS property in a div element with the single value. This single value will add space equally in all directions i.e top, bottom, right and left. See the demo by clicking the link or image:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<html>
<head>
<style>
/*Using padding*/
.div_ex1
{
padding: 20px;
border-style: solid;
border-color: #FF5599;
border-width: 1px;
}
.div_ex2
{
padding: 20pt;
border-style: solid;
border-color: #FF5599;
border-width: 1px;
}
.div_ex3
{
padding: 1cm;
border-style: solid;
border-color: #FF5599;
border-width: 1px;
}
</style>
</head>
<body>
<div>This Div element uses shorthand padding property in pixels value</div><br />
<div>This Div element uses shorthand padding property in pt value</div><br />
<div>This Div element uses shorthand padding property in cm value</div>
</body>
</html>
|
Add padding with four values example
This example uses four values to define the padding.
The padding order is:
- The first value defines the top.
- The second is right.
- The third is the bottom.
- The fourth value defines the left padding.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<html>
<head>
<style>
/*Using padding */
.div_ex
{
padding: 20px 200px 50px 100px;
border-style: solid;
border-color: #FF5599;
border-width: 1px;
}
</style>
</head>
<body>
<div>This is Div element with four padding values
<br />
This is Div element with four padding values
<br />
This is Div element with four padding values
</div>
</body>
</html>
|
Using shorthand padding property to change padding with two values
If you specify only two values then the CSS padding order will be:
- The first value will define padding for top and bottom.
- While the second value will define padding for left and right.
See the example of padding with two values:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<html>
<head>
<style>
/*Using padding */
.div_ex1
{
padding: 20px 30px;
border-style: solid;
border-color: #FF5599;
border-width: 1px;
}
.div_ex2
{
padding: 20pt 30pt;
border-style: solid;
border-color: #FF5599;
border-width: 1px;
}
.div_ex3
{
padding: 2cm 3cm;
border-style: solid;
border-color: #FF5599;
border-width: 1px;
}
</style>
</head>
<body>
<div>This Div element uses shorthand padding property in pixels value</div><br />
<div>This Div element uses shorthand padding property in pt value</div><br />
<div>This Div element uses shorthand padding property in cm value</div>
</body>
</html>
|
A padding-top and padding-left properties example
Instead of using the shorthand padding property, you can use the individual property for each direction. The example below shows how to use the padding-top and padding-left properties to define spaces in a div element.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<html>
<head>
<style>
/*Using padding */
.div_ex
{
padding-top: 20px;
padding-left: 20px;
padding-bottom: 20px;
border-style: solid;
border-color: #FF5599;
border-width: 1px;
}
</style>
</head>
<body>
<div>This is Div element with padding-top, padding-left and padding-bottom example
<br />
This is Div element with padding-top, padding-left and padding-bottom example
<br />
This is Div element with padding-top, padding-left and padding-bottom example
</div>
</body>
</html>
|
In the same way, you can use the padding-right and padding-bottom properties to define the padding of elements.
Leave A Comment?