CSS padding-left

Padding is the space between the content of an element and its border.

The padding-left property adds spacing to the left of the element.

It accepts any length value, such as, px, %, em, etc.



An element with a 50-pixel padding-left value.

This element has a 50px left padding
<div style="padding-left: 50px;
     border:2px solid steelblue;">
  This element has a 50px left padding


padding-left: length | initial | inherit;



Value Description
length Sets the left padding using any valid CSS length values. Default is 0. Negative values are allowed.
% Sets left padding in percent of the width of the containing element
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different padding-left values.

5% left padding
  .padding-left {
    padding-left: 5%;
    border: 2px solid steelblue;

<div class="padding-left">
  5% left padding

Browser support

This table shows when padding-left support started for each browser.

1.0 Dec 2008
1.0 Nov 2004
4.0 Sep 1997
3.5 Nov 1998
1.0 Jun 2003

You may also like

Last updated on Sep 30, 2023