CSS padding-left Property: Complete Guide with Syntax and Examples

Introduction
Syntax and Example
Accepted Values
Frequently Asked Questions(FAQ)

INTRODUCTION

The padding-left property defines the space between the left border of an element and its content.

It adds space inside the element, pushing content rightward. It also affects the box model — adding padding-left can increase the total width (unless box-sizing: border-box is set).

Syntax


padding-left: [length] | [percentage];

Example


p{
  padding-left: 40px;
  border: 1px solid black;
}

Output

An automobile is a self-propelled vehicle designed for transporting people on roads. The automobile has revolutionized modern life by offering flexibility, convenience, and speed in travel. Whether it's a compact automobile for city use or a powerful SUV, the type of automobile someone chooses often reflects their lifestyle.

Accepted Values

The padding-left property should be specified as a single value. It accepts any length units and percentgae values. Like padding property this property also does not accepts negative values. Here's a list of the units that can be used for this property in CSS:

Absolute Length Units - px, pt, pc, in, cm, mm, Q
Relative Length Units - em, rem, ex, ch, lh, rlh
Viewport Units - vw, vh, vmin, vmax
Percentage Unit - calculated with respect to the width of the containing block
Global Values - inherit, initial, unset, revert, revert-layer

Frequently Asked Questions (FAQ)

What is the difference between margin-left and padding-left in CSS?

Both margin-left and padding-left create space at the left of an element — but they serve different purposes and behave differently.

margin-left

Adds space outside the element, on the left.
Creates distance from neighboring elements.
Does not affect the content inside the element.
Background color does not extend into the margin.
Can collapse with adjacent vertical margins (only applies to top/bottom margins).

padding-left

Adds space inside the element, on the left.
Pushes content to the right within the element.
Affects the element’s width unless using box-sizing: border-box.
Background color does extend into the padding area.
Cannot collapse..

How to remove default indentation from lists?

HTML lists (<ul> and <ol>) come with default padding-left applied by browsers — usually to indent the list items. To remove default left indentation from lists use padding-left property with value set to 0 as shown in the code below.


 ul, ol {
   padding-left: 0;
 }