totn CSS

CSS: padding-left property

This CSS tutorial explains how to use the CSS property called padding-left with syntax and examples.

Description

The CSS padding-left property defines the padding space on the left side of an element.

Syntax

The syntax for the padding-left CSS property is:

padding-left: value;

Parameters or Arguments

value

The padding space to apply to the left side of the element. It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, ...
div { padding-left: 5px; }
div { padding-left: 4em; }
percentage Percentage value
div { padding-left: 8%; }
inherit Element will inherit the padding-left from its parent element
div { padding-left: inherit; }

Note

  • The value in the CSS padding-left property can be expressed as either a fixed value or as a percentage.
  • Negative values are not allowed in the CSS padding-left property.
  • When the value is provided as a percentage, it is relative to the width of the containing block.
  • See also padding, padding-top, padding-bottom, and padding-right.

Browser Compatibility

The CSS padding-left property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the padding-left property below, exploring examples of how to use this property in CSS with a fixed value as well as a percentage value.

Using Fixed Value

Let's look at a CSS padding-left example where we have provided the value as a fixed value.

div { padding-left: 10px; }

In this CSS padding-left example, we have provided a value of 10px which would apply to the left side of the element.

Let's look at another CSS padding-left example with a fixed value.

div { padding-left: 6em; }

In this CSS padding-left example, we have provided a value of 6em which would apply to the left side of the element.

Using Percentage

Let's look at a CSS padding-left example where we have provided the value as a percentage.

div { padding-left: 5%; }

In this CSS padding-left example, we have provided a value of 5% which would apply to the left side of the element.

Share on: