CSS Padding

The CSS padding property is used to create space around an element’s content, inside the specified borders.

So, CSS margin property is used to create space around element’s, outside the specified borders and the CSS padding property is used to create space around element’s, inside the specified borders.

With CSS, we have full control over the padding. We can setup the padding for each side of an element (top, right, bottom & left) by using the following properties:

padding-top
padding-right
padding-bottom
padding-left

These padding properties can have the following values:

length
%
inherit

NOTE:- Unlike margins negative values are not allowed here.

In an example below let’s write a code where we set different padding for all four sides of an p element.

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
</style>
</head>
<body>
<h1>Using individual padding properties</h1>
<p>This element has a top padding of 60px, a right padding of 30px, a bottom padding of 50px, and a left padding of 60px.</p>
</body>
</html>

Copy the Code and Run it Here

padding-shorthand

By writing the code like we write in an above example, can makes a code lengthy and difficult to read. Because we have write all four padding properties (top, right, bottom, left) in a separate lines.

So, to shorten the code and make it easy to read, we can define all the padding properties in a single line. Like this:

p {
  padding: 50px 30px 50px 80px;
}

Now to test it whether it works or not let’s put the same code in a below example.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 1px solid green;
  padding: 60px 30px 50px 60px;
  background-color: lightblue;
}
</style>
</head>
<body>
<h1>Using individual padding properties</h1>
<p>This element has a top padding of 60px, a right padding of 30px, a bottom padding of 50px, and a left padding of 60px.</p>
</body>
</html>

Copy the Code and Run it Here

If the padding property has 3 values, like this: