CSS Padding
Padding refers to the area between the element's content and the border. Padding can be added to the entire surface of an element or to each side individually.
Syntax:
.selector
{
padding: value;
}
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Padding
</title>
</head>
<body>
<p class="para1"> This is a paragraph with 12px padding. </p>
</body>
</html>
CSS
.para1
{
border: 2px solid black;
padding: 12px;
}
Output
Individual sides padding
CSS allows you to set the padding for each side of an element:
- padding-top
- padding-right
- padding-bottom
- padding-left
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Padding
</title>
</head>
<body>
<p class="para1"> This paragraph has a padding of 40px at the top, 30px at the right, 40px at the bottom, and 60px at the left. </p>
</body>
</html>
CSS
.para1
{
border: 2px solid black;
padding-top: 40px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 60px;
}
Output
Padding shorthand property
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Padding
</title>
</head>
<body>
<p
class="para1">
This paragraph has a padding of 30px at the top, 40px at the right,
60px at the bottom, and 80px at the left.
</p>
</body>
</html>
CSS
.para1
{
border: 2px solid black;
padding: 30px 40px 60px 80px;
}
Output
