The space between the content and its border is named padding.
The margin creates the space around an element, while the padding creates space within an element.
The CSS padding property is a shorthand property for the following properties:
Syntax:
padding: length;length – defines fixed padding in px, cm, etc.
The CSS padding property can have from one to four values:
If the padding property has four values:
<!DOCTYPE html>
<html>
<head>
<style>
.ex1 {
border: 1px solid #333;
padding: 45px 80px 60px 100px;
}
</style>
</head>
<body>
<p class="ex1">This paragraph has a 45px padding for top, a 80px padding for right, a 60px padding for bottom, and a 100px padding for left.</p>
</body>
</html>Output:
Top padding is 45px, right padding is 80px, bottom padding is 60px and left padding is 100px:
This paragraph has a 45px padding for top, a 80px padding for right, a 60px padding for bottom, and a 100px padding for left.
If the padding property has three values:
<!DOCTYPE html>
<html>
<head>
<style>
.ex2 {
border: 1px solid #333;
padding: 45px 80px 60px;
}
</style>
</head>
<body>
<p class="ex2">This paragraph has a 45px padding for top, a 80px padding for right and left, and a 60px padding for bottom.</p>
</body>
</html>Output:
Top padding is 45px, right and left padding are 80px, and bottom padding is 60px:
This paragraph has a 45px padding for top, a 80px padding for right and left, and a 60px padding for bottom.
If the padding property has two values:
<!DOCTYPE html>
<html>
<head>
<style>
.ex3 {
border: 1px solid #333;
padding: 45px 80px;
}
</style>
</head>
<body>
<p class="ex3">This paragraph has a 45px padding for top and bottom, and a 80px padding for right and left.</p>
</body>
</html>Output:
Top and bottom padding are 45px, right and left are 80px:
This paragraph has a 45px padding for top and bottom, and a 80px padding for right and left.
If the padding property has one value:
<!DOCTYPE html>
<html>
<head>
<style>
.ex4 {
border: 1px solid #333;
padding: 25px;
}
</style>
</head>
<body>
<p class="ex4">This paragraph has a padding of 25px on all four sides.</p>
</body>
</html>Output:
All four paddings are 25px:
This paragraph has a padding of 25px on all four sides.
Enjoy coding!
Read also: