CSS padding-left Property

Sets the internal space between the content of an element and its left border.

selector { padding-left: value; }

<length>	Specifies a fixed space using units like px, em, rem, or pt.
<percentage>	Defines the padding as a percentage of the width of the containing element.
inherit	Instructs the element to take the padding-left value from its parent element.

Code Examples

A basic example showing how padding-left creates internal space between the border and the text.

<div style="border: 2px solid #333333; padding-left: 50px; background-color: #f4f4f4;">
  This text is pushed 50 pixels away from the left border.
</div>

An advanced example using JavaScript to dynamically update the padding-left property and trigger a smooth CSS transition.

<div id="myBox" style="width: 300px; border: 5px solid #ff0000; padding-left: 10px; transition: padding-left 0.5s;">
  Watch my left padding grow!
</div>
<button onclick="expandPadding()">Add Space</button>

<script>
function expandPadding() {
  const box = document.getElementById("myBox");
  box.style.paddingLeft = "100px";
}
</script>

Pro Tip

If you are working on a localized site that supports Right-to-Left (RTL) languages like Arabic or Hebrew, consider using the logical property padding-inline-start instead of padding-left. It will automatically flip the padding to the right side for RTL users without you having to write extra CSS rules.

Deep Dive

Think of padding-left like the internal buffer or breathing room inside a box. While margin handles the space outside the box to push neighbors away, padding-left pushes the content inside the box away from the left wall. If you apply a background color to your element, you will see that color extending into the padding area because padding is part of the element's interior. In the standard box model, adding padding-left will actually increase the total calculated width of your element unless you change the box-sizing behavior.

Best Practices

Stick to relative units like em or rem for padding whenever possible. This ensures that your layout scales correctly if a user changes their browser's default font size. Also, if you are setting padding for all four sides, save yourself the typing and use the padding shorthand property instead of declaring four separate lines.

Common Pitfalls

The biggest trap for beginners is the box-sizing property. By default, browsers use content-box, which means if you set a width of 100px and a padding-left of 20px, your element actually becomes 120px wide. This often breaks layouts. To fix this, use box-sizing: border-box; so the padding is included within the width you specified.

Accessibility

Proper use of padding-left improves readability by preventing text from slamming against the edge of its container or a border. Give your text some room to breathe, especially on mobile devices where screens are narrow, but be careful not to use so much padding that you starve the actual content of usable space.

Dev Data Table: padding-left property

default	0
animatable	yes
inherited	no
experimental	no
year_intro	1996
year_standard	1996
js_syntax_1	element.style.paddingLeft = "20px";
js_syntax_2	element.style.setProperty("padding-left", "20px");
js_note	When manipulating this property in JavaScript, use camelCase for the style object or the exact string name for the setProperty method.
browsers	{ "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 3.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10 }