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

HTML

<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>

CSS

.layer { 
   background: #fc3;
   border: 5px solid #000;
   padding: 5px;
   padding-left: 40px;
}

Result

Editor

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

Support Us