CSS padding-left Property
Description
The padding-left CSS property controls the amount of space added to the left side of an element's content box, inside its border. It effectively creates empty space or padding on the left-hand side of the element, pushing the content away from the element's left edge. This property is often used to create spacing between the content and the element's border on the left side, helping to improve layout and design by providing visual separation and alignment control. It is part of the CSS box model, which governs how elements are sized and spaced within a web page layout.
- Initial value
- 0
- Applies to
- All elements
- Inherited
- No
- Computed value
- <length> - the percentage as specified or the absolute length
- Animatable
- Yes
- JavaScript syntax
- object.style.paddingLeft
Interactive Demo
The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.
Syntax
padding-left: [ <length> | <percentage> ]
Values
- <length>Specifies a positive fixed width.
- <percentage>A percentage with respect to the width of the containing block.
- inherit
Example
<div class="layer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>.layer {
background: #fc3;
border: 5px solid #000;
padding: 5px;
padding-left: 40px;
}Browser Support
The following table will show you the current browser support for the CSS padding-left property.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 12 | 1 | 1 | 3.5 | 1 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 4 | 14 | 1 | 1 | 37 |
Last updated by CSSPortal on: 2nd January 2024