Home >>CSS Tutorial >CSS Padding

CSS Padding

CSS Padding

CSS padding property allows you to generate the space between the element content inside of any defined elements border. There are few properties to define the padding for each side of the element (top, right, bottom, left). With using CSS you have a full control over the padding.

The value of the attribute can be used in either a length or a percentage. If you can used percentage then, it takes space as the percentage of the containing box. CSS padding is different from CSS margin. CSS Margin defines the space around an element and CSS padding clears an area around the content.

CSS Padding Properties

These are the following CSS Padding properties:

Property Description
padding-top By using this property you can set the top padding of an element.
padding-right By using this property you can set the right padding of an element.
padding-bottom By using this property you can set the bottom padding of an element
padding-left By using this property you can set the left padding of an element.

CSS Margin Values

These are the following values of CSS Padding properties:

Value Description
% It specifies padding in percent of the width containing element.
Length It is used to define fixed padding in cm, pt, px etc. default value is 0px.

Let's take an Example of CSS padding:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h4{  
    background-color: #9bf2d1;  
}  
h4.padding {  
    padding-top: 50px;  
    padding-right: 100px;  
    padding-bottom: 150px;  
    padding-left: 200px;  
}  
</style>  
</head>  
<body>  
<h4>This is a paragraph without padding.</h4>  
<h4 class="padding">This is a paragraph with paddings.</h4>  
</body>  
</html> 
Output:

This is a paragraph without padding.

This is a paragraph with paddings.

Padding: shorthand property

To shorten the code you can use this property. You can set all padding properties at once.

There are four values to define the padding property. You can use one of them as per your needs.

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

There are four values to define the padding property. You can use one of them as per your needs.

1. padding: 30px 60px 85px 110px

  • top padding is 30px
  • right padding is 60px
  • bottom padding is 85px
  • left padding is 110px

Let's take an example of shorthand property with four values:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 30px 60px 85px 110px;
  background-color: #9bf2d1;
}
</style>
</head>
<body>
<h2>shorthand property with four values</h2>
<div>This div element has four values: top padding of 30px, a right padding of 60px, a bottom padding of 85px, and a left padding of 110px.</div>
</body>
</html>
Output:

shorthand property with four values

This div element has four values: top padding of 30px, a right padding of 60px, a bottom padding of 85px, and a left padding of 110px.

2. padding: 30px 60px 85px

  • top padding is 30px
  • right and left padding are 60px
  • bottom padding is 85px

Let's take an example of shorthand property with three values:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 30px 60px 85px;
  background-color: #9bf2d1;
}
</style>
</head>
<body>
<h2>padding shorthand property with three values</h2>
<div>This div element has three values: top padding of 30px, a right and left padding of 60px, and a bottom padding of 85px.</div>
</body>
</html>
Output:

padding shorthand property with three values

This div element has three values: top padding of 30px, a right and left padding of 60px, and a bottom padding of 85px.

3. padding: 30px 60px

  • top and bottom padding is 30px
  • right and left padding are 60px

Let's take an example of shorthand property with two values:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 30px 60px;
  background-color: #9bf2d1;  }
</style>
</head>
<body>
<h2>padding shorthand property with two values</h2>
<div>This div element has two values: top and bottom padding of 30px, and a right and left padding of 60px.</div>
</body>
</html>
Output:

padding shorthand property with two values

This div element has two values: top and bottom padding of 30px, and a right and left padding of 60px.

4. padding: 30px

  • All four padding are 30px

Let's take an example of shorthand property with one value:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 30px;
  background-color: #9bf2d1;  
}
</style>
</head>
<body>
<h2>padding shorthand property with one value</h2>
<div>This div element has one value: top, bottom, left, and right padding of 30px.</div>
</body>
</html>
Output:

padding shorthand property with one value

This div element has one value: top, bottom, left, and right padding of 30px.

The auto Value

By using the auto value the element will automatically adjust itself with the specified width, and the remaining space will be equally split between the left and right padding with the browser calculation.

Let's take an example of padding auto value:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width:280px;
  padding: auto;
  border: 2px solid #9bf2d1;
}
</style>
</head>
<body>
<h2>padding auto value</h2>
<div>
This div will be adjust automatically horizontally centered because of using padding: auto;
</div>
</body>
</html>
Output:

padding auto value

This div will be adjust automatically horizontally centered because of using padding: auto;