Padding is the space between the element and its border. The shorthand property of padding sets the padding area in all four sides of the element. The padding value can be in px, em, rem or %. If we want to apply padding on a specific side we can use the following properties:
- padding-left: Sets padding on the left side of the element.
- padding-right: Sets padding on the right side of the element.
- padding-top: Sets padding on the top side of the element.
- padding-bottom: Sets padding on the bottom side of the element.
Syntax:
padding: value;
Different Vertical and Horizontal padding:
padding: value1 value2;
- value1: Sets the padding value on the top and bottom sides of the element.
-
value2: Sets the padding value on the right and left sides of the element.
Different top, horizontal, and bottom padding:
padding: value1 value2 value3;
- value1: Sets padding on the top side of the element.
- value2: Sets padding on the right and the left side of the element.
-
value3: Sets padding on the bottom side of the element.
Different padding on all four sides:
padding: value1 value2 value3 value4;
- value1: Sets padding on the top side of the element.
- value2: Sets padding on the right side of the element.
- value3: Sets padding on the bottom side of the element.
- value4: Sets padding on the left side of the element.
Example 1: padding with only 1 value
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1{
width: fit-content;
border: 4px solid #308D46;
color: #308D46;
padding: 20px;
}
</style>
</head>
<body>
<h1> GeeksforGeeks</h1>
</body>
</html>
|
Output:
Example 2: Padding with two values
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1{
width: fit-content;
border: 4px solid #308D46;
color: #308D46;
padding: 5px 40px;
}
</style>
</head>
<body>
<h1> GeeksforGeeks</h1>
</body>
</html>
|
Output:
Example 3: Padding with three values
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1{
width: fit-content;
border: 4px solid #308D46;
color: #308D46;
padding: 5px 40px 30px;
}
</style>
</head>
<body>
<h1> GeeksforGeeks</h1>
</body>
</html>
|
Output:
Example 4: Padding with four values
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
h1{
width: fit-content;
border: 4px solid #308D46;
color: #308D46;
padding: 15px 40px 45px 5px;
}
</style>
</head>
<body>
<h1> GeeksforGeeks</h1>
</body>
</html>
|
Output: