”;
CSS padding is used to creates extra space between border of element and it”s contents. In this article we will learn different types of padding and properties associated with it.
What is CSS Padding?
In CSS, padding is a property that is used to create additional spacing inside the boundary of an element. The default value for padding is zero. A padding value zero indicate that content (mostly text contents) will start from the border of element itself.
CSS Padding Example
You can try different ways to use to create padding in the below section and you can change the values as well.
Table of Contents
Define Padding
To define any padding on any HTML element you can use CSS padding property, this property is shorthand property of ”padding-top”, ”padding-right”, ”padding-bottom” and ”padding-left” properties. A single value will generate padding all around the element.
Syntax
padding: "value";
Example
As you can see in this below example we have generated 5px padding surrounding the paragraph element and highlight the padding area with light-green background.
<!DOCTYPE html>
<html>
<head>
<title>CSS Padding</title>
<style>
div{
background-color: lightgray;
border: 1px solid black;
}
p {
background-color: white;
}
</style>
</head>
<body>
<h1>Tutorialspoint</h1>
<h3>CSS Padding</h3>
<div>
<p style="padding: 5px;">
CSS Padding Applied on Paragraph Element
</p>
</div>
</body>
</html>
Padding Individual Sides
As we have mentioned earlier the padding is shorthand property for all Individual sides padding. You can set different padding values for top, right, bottom and left sides.
- padding-top: This property is used to set the padding top on any element.
- padding-right: This property is used to set the padding right on any element.
- padding-bottom: This property is used to set the padding bottom on any element.
- padding-left: This property is used to set the padding left on any element.
You can check the attached image for more clarity on individual side paddings.
Syntax
padding-top: "value"; padding-right: "value"; padding-bottom: "value"; padding-left: "value";
Example
In this example we have create 4 different element and generated padding on each element”s individual sides with the above mentioned properties.
<!DOCTYPE html>
<html>
<head>
<title>CSS Padding</title>
<style>
div{
background-color: lightgray;
border: 1px solid black;
}
p {
background-color: lightgreen;
border: 1px solid black;
}
span {
background-color: white;
}
</style>
</head>
<body>
<h1>Tutoriaslpoint</h1>
<h3>CSS Padding</h3>
<div>
<p style="padding-top: 15px;">
<span>CSS Padding Top Applied on Paragraph Element</span>
</p>
<p style="padding-right: 15px;">
<span>CSS Padding Right Applied on Paragraph Element</span>
</p>
<p style="padding-bottom: 15px;">
<span>CSS Padding Bottom Applied on Paragraph Element</span>
</p>
<p style="padding-left: 15px;">
<span>CSS Padding Left Applied on Paragraph Element</span>
</p>
</div>
</body>
</html>
All the left over space on the right side of the element can be confusing to identify the padding, if you try on your own by changing values it will clear the padding concept. And always remember negative values are not allowed for padding in CSS.
Different Ways to Apply Padding on HTML Elements
There are four ways to provide value to the CSS padding property all of them are mentioned and described bellow with the complete example code.
- Single Values: Here you can provide a single value to the padding property that same value will be applicable on four sides of the the element.
- Two Values: Here you have to provide two values that will be used as top, bottom and right, left padding value.
- Three Values: In this way you can provide three values that will define top, left, right and bottom value. Like if you set padding: 20px 40px 10px. In this case top padding will be 20px, right and left paddings will be 40px and bottom padding will be 10px.
- Four Values: If you provide four values to the padding property it will generate top padding from first value, right padding from 2nd value and so on.
Syntax
padding: "value" // Single Value padding: "value value" // Two Values padding: "value value value" // Three Values padding: "value value value value" // Four Values
Example
In this following example we have crated a four different element and used inline css to generate padding around the element in different ways.
<!DOCTYPE html>
<html>
<head>
<title>CSS Padding</title>
<style>
div{
background-color: lightgray;
border: 1px solid black;
}
p {
background-color: lightgreen;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Tutoriaslpoint</h1>
<h3>CSS Padding</h3>
<div>
<p style="padding: 20px">
<span>Padding property with Single Value</span>
</p>
<p style="padding: 10px 20px">
<span>Padding property with two Values</span>
</p>
<p style="padding: 10px 15px 20px">
<span>Padding property with three Values</span>
</p>
<p style="padding: 5px 10px 15px 20px">
<span>Padding property with four Values</span>
</p>
</div>
</body>
</html>
Padding Mix up Units
CSS does not restrict usage of multiple units for specifying the values of padding, while specifying in shorthand property. That means one can pass values of length as pixel along with ems or inches, etc.
Syntax
h2 {
padding: 20px 4ex .5in 3em;
}
Example
In this following example we will provide 4 values on padding property but each value will be mentioned in different units..
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
padding: 20px 4ex .5in 3em;
background-color: silver;
}
</style>
</head>
<body>
<div>
<h2>
The different length units are passed
as padding values to the h2 element.
</h2>
</div>
</body>
</html>
Padding Percentage Values
Padding property can have a percentage value passed, as CSS allows it. Percentages are calculated in relation to the width of the parent element’s content area.
Syntax
p {
padding: 10%;
}
Example
Here in this example we will provide values for padding property in percentage, this percentage is depend on the width of the parent element”s content area.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
}
p {
padding: 10%;
background-color: silver;
}
</style>
</head>
<body>
<div>
<p>
The padding defined for p element is
10%, which is calculated as 10% of
width of parent element, which means
it is 10% of 300px and that is 30px.
</p>
</div>
</body>
</html>
Padding Properties Reference
You can explore more examples on padding properties by visiting the sub topics listed in the following table:
| Property | Description | Example |
|---|---|---|
| padding | A shorthand property that is used for setting all the padding properties in one declaration. | |
| padding-top | Sets the top padding of an element. | |
| padding-right | Sets the right padding of an element. | |
| padding-bottom | Sets the bottom padding of an element. | |
| padding-left | Sets the left padding of an element. |
”;