CSS padding-left Property
CSS padding-left property sets the left side padding to HTML Element(s).
The syntax to specify a value for padding-left property is
padding-left: value;
The following table gives the possible values that could be given to padding-left property.
| Value | Description | Examples |
|---|---|---|
| length | Any valid CSS length unit. Refer CSS Length Units tutorial. | padding-left: 10px;padding-left: 5pt;padding-left: 2cm; |
| Percentage Value | Padding in percent of the width of the containing element. | padding-left: 20%; |
| initial | Sets padding-left to default value. | padding-left: initial; |
| inherit | Inherits padding-left value from its parent element. | padding-left: inherit; |
Examples
In the following examples, we set left side padding to HTML Element(s) with a few allowed values for padding-left property.
padding-left property with CSS Length Units
In the following example, we apply padding-left property to paragraphs with a few different CSS Length Unit values.
index.html
Note: border and display properties have been specified only to understand the bounds of the HTML Elements and thus understand the extent of padding applied for these HTML Elements.
padding-left property with Percentage Values
In the following example, we apply padding-left property to paragraphs with a few different percentage values.
If padding-left is specified in percentage values, and if width of the HTML element changes, then the padding also changes. For example, try to resize the browser window, and observe the left side padding for these HTML Elements.
index.html
padding-left property for a few HTML elements
In the following example, we take a few HTML elements like h1, p, a, span, and pre, and set padding-left for these HTML elements.
index.html
Conclusion
In this CSS Tutorial, we learned about padding-left property, and how to use this property for HTML Elements, with examples.