CSS padding-left Property

CSS padding-left property defines the padding for the left side of an element. The padding-left is the space between the content and the left border of an element.

The padding-left property can be specified in any valid CSS length formats such as โ€˜pxโ€™, โ€™emโ€™, โ€˜remโ€™, โ€˜cmโ€™, etc. It can also be specified using percentage(%). It does not accept negative values.

Example:

.p1{
  padding-left: 40px;
}
.p2{
  padding-left: 4em;
}
.p3{
  padding-left: 20%;
}

CSS Syntax

The padding-left property has the following syntax:

padding-left: length|percentage|initial|inherit;

Property Values

The padding-left property accepts the following values:

lengthSets a fixed left padding in CSS length formats such as โ€˜pxโ€™, โ€™emโ€™, โ€˜remโ€™, โ€˜cmโ€™, etc. The default value is zero.
percentageSets left padding in percentage. The percentage value is calculated by taking the percentage of the elementโ€™s width itself.
initialSets the padding-left property to its default value(0).
inheritInherits the padding-left property from the parent element.

General Info

Default Value0
InheritedNo
JavaScript Usageelement.style.paddingLeft = โ€œ40pxโ€