Definition:
In CSS, the padding property is used to set the padding area for all four sides of an element. Padding is the space between the content of an element and its border.
Syntax:
selector {
padding: top right bottom left;
}top,right,bottom, andleftare optional values that represent the padding on each side of the element. They can be specified in various units, such as pixels (px), em, rem, percentages, etc.
If you provide one value, it sets the padding for all sides. If you provide two values, the first value sets the top and bottom padding, and the second value sets the right and left padding. If you provide three values, the first value sets the top padding, the second sets the right and left padding, and the third sets the bottom padding. If you provide four values, they set the top, right, bottom, and left padding individually.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Set padding for a div with the class 'box' */
.box {
width: 200px;
background-color: lightblue;
border: 2px solid navy;
/* Padding shorthand property: padding: top right bottom left; */
padding: 20px 10px 30px 15px;
margin: 20px;
}
/* Set padding for a paragraph inside the div */
.box p {
padding: 10px;
}
</style>
<title>Padding Example</title>
</head>
<body>
<div class="box">
<p>This is a box with specified padding.</p>
</div>
</body>
</html>In this example:
- The first CSS rule sets the padding for the
divelement with the classbox. The shorthandpaddingproperty is used to set different padding values for each side:20pxfor the top,10pxfor the right,30pxfor the bottom, and15pxfor the left. - The second CSS rule sets additional padding for the paragraphs (
p) inside thediv. This padding is10pxon all sides.
You can modify the values to adjust the padding according to your design requirements. The use of padding helps create space and improves the overall aesthetics of your webpage.
Output:
