CSS Padding

CSS Padding

The padding property allows you to specify how much space should appear between the content of an element and its border.

You can also set different values for the padding on each side of the box using the following properties:

All the padding properties can have the following values:

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
p {  
    background-color: pink;  
}  
p.padding {  
    padding-top: 50px;  
    padding-right: 100px;  
    padding-bottom: 150px;  
    padding-left: 200px;  
}  
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>
</html>
Try it with the Editor

Padding: Shorthand Property

CSS shorthand property is used to shorten the code. It specifies all the padding properties in one property.

There are four types to specify the padding property. You can use one of them.

  1. padding: 25px 50px 75px 100px;
  2. padding: 25px 50px 75px;
  3. padding: 25px 50px;
  4. padding 25px;
1. padding: 25px 50px 75px 100px;
2. padding: 25px 50px 75px;
3. padding: 25px 50px;
4. padding 25px;