CSS padding-left Property
The padding-left CSS property sets the padding space on the left side of an element.
INFO
Negative values are not valid.
INFO
This property doesn't have any effect on inline elements, like <span>.
| Initial Value | 0 |
|---|---|
| Applies to | All elements, an exception is made when the display property is set to table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. It also applies to ::first-letter. |
| Inherited | No. |
| Animatable | Yes. Padding space is animatable. |
| Version | CSS1 |
| DOM Syntax | object.style.paddingLeft = "40px"; |
Syntax
Syntax of CSS padding-left Property
css
padding-left: length | initial | inherit;Example of the padding-left property:
Example of CSS padding-left Property with px value
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-left: 100px;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Result
Example of the padding-left property defined as "3cm":
Example of CSS padding-left Property with cm value
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-left: 3cm;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Example of the padding-left property with the "percentage" value:
CSS Padding -left property example with the %
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px solid #cccccc;
color: deepskyblue;
padding: 20px;
padding-left: 15%;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| length | It sets the left padding in px, pt, cm, etc. Its default value is 0px. | Play it » |
| % | It sets left padding in percent of the width of the containing element. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |
Practice
What is the correct usage of padding-left in CSS according to the content on the page?