Padding is the space between the content of an element and its border.
The padding-left property adds spacing to the left of the element.
It accepts any length value, such as, px, %, em, etc.
An element with a 50-pixel padding-left value.
<div style="padding-left: 50px;
border:2px solid steelblue;">
This element has a 50px left padding
</div>
padding-left: length | initial | inherit;
| Value | Description |
|---|---|
| length | Sets the left padding using any valid CSS length values. Default is 0. Negative values are allowed. |
| % | Sets left padding in percent of the width of the containing element |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different padding-left values.
<style>
.padding-left {
padding-left: 5%;
border: 2px solid steelblue;
}
</style>
<div class="padding-left">
5% left padding
</div>
This table shows when padding-left support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
4.0 | Sep 1997 |
 Opera
|
3.5 | Nov 1998 |
 Safari
|
1.0 | Jun 2003 |
