CSS padding-left Property

What You’ll Learn

The padding-left property sets inner spacing on the left edge of an element. Padding adds space inside an element, which can help improve the visual layout and readability of your content.

Introduction

The padding-left property in CSS is used to define the amount of space between the content of an element and its left border. Padding adds space inside an element, which can help improve the visual layout and readability of your content.

This property is part of the CSS box model, which also includes margins, borders, and content.

Definition and Usage

Apply padding-left when you need extra room to the left of the content inside an element — for example, indenting a paragraph, offsetting text beside an icon, or adding space inside a card before the left border.

Like all padding properties, padding-left increases the visible size of an element’s background and border box. It never collapses and always stays inside the element’s border.

📝 Syntax

The syntax for the padding-left property is simple. You specify the padding value directly within the CSS rule for the desired element.

element {
  padding-left: value;
}

Here, value can be specified in different units such as pixels (px), ems (em), percentages (%), or other valid CSS units.

Basic Example

p {
  padding-left: 20px;
  border: 1px solid #000;
}

Syntax Rules

• Apply padding-left to any element that needs extra inner space on the left side.
• The value is a length, percentage, or keyword such as inherit or initial.
• The property is not inherited — child elements do not automatically get the parent’s left padding.
• Percentage padding is calculated relative to the width of the containing block.

🎯 Default Value

The default value for the padding-left property is 0. This means that if no value is specified, there will be no extra space between the content and the left border of the element.

💎 Property Values

Examples Gallery

Start with the reference paragraph example, try different left values, add indent spacing in lists, and compare physical left padding with logical inline-start padding.

<style>
  p {
    padding-left: 20px;
    border: 1px solid #000;
  }
</style>

<p>
  This paragraph has a left padding of 20 pixels, which adds space between the content and the left border.
</p>

.compact {
  padding-left: 0.5rem;
}

.comfortable {
  padding-left: 1.5rem;
}

.spacious {
  padding-left: 2.5rem;
}

.custom-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-list li {
  padding-left: 1.25rem;
  border-left: 3px solid #2563eb;
  margin-bottom: 0.5rem;
}

/* Physical — fixed to left edge */
.physical {
  padding-left: 24px;
}

/* Logical — follows text direction */
.logical {
  padding-inline-start: 24px;
}

padding-left vs padding, padding-inline-start & margin-left

The padding shorthand sets padding on all four sides at once. Use padding-left when you need spacing on only the left edge.

padding-inline-start is the logical equivalent that follows the inline axis. Use padding-left for simple physical layouts; prefer padding-inline-start in multilingual or RTL designs. Remember: margin-left adds space outside the border, not inside it.

/* Left only */
.quote {
  padding-left: 1.25rem;
  border-left: 4px solid #2563eb;
}

/* All four sides via shorthand */
.card {
  padding: 1rem 1.5rem;
}

/* Space to the left outside the border */
.sidebar {
  margin-left: 2rem;
}

♿ Accessibility

• Improve readability — Paragraphs and list items benefit from left padding so text does not crowd the left border.
• Touch targets — Buttons and links inside padded containers are easier to tap when left padding gives them room.
• RTL layouts — For multilingual sites, consider padding-inline-start instead of padding-left so spacing follows text direction.
• Do not hide content — Very large left padding on small screens can squeeze readable text area.
• Test zoomed layouts — Users who zoom in rely on comfortable padding to keep text readable.

💡 Best Practices