CSS Padding

The CSS Padding property is used to define the space between the content and the border of the element. It clears an area around the content unlike margins which clears the area around the element.

You can change the padding of an element one by one for each side or can give all at once using shorthand property.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Padding </title>
<meta charset="UTF-8">
</head>
<style>
p{
border: 1px solid black;
background-color: #a78f3d;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<p>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px,
and a left padding of 80px.</p>
</body>
</html>

Output

CSS Padding Examples

This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.


CSS Padding Shorthand Properties


If four values are given: If three values are given:
padding: 25px 50px 75px 100px; padding: 25px 50px 75px;
top padding is 25px top padding is 25px
right padding is 50px left and right paddings are 50px
bottom padding is 75px bottom padding is 75px
left padding is 100px
If two values are given: If one value are given:
padding: 25px 50px; padding: 25px;
top and bottom paddings are 25px all four paddings are 25px
left and right paddings are 50px








Follow Us: