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>
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>
shorthand property with four values
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>
padding shorthand property with three values
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>
padding shorthand property with two values
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>
padding shorthand property with one value
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>