Padding Left

Set an element's left padding.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

pl-0
padding-left: 0;
pl-1
padding-left: .25rem;
pl-2
padding-left: .5rem;
pl-3
padding-left: .75rem;
pl-4
padding-left: 1rem;
pl-5
padding-left: 1.25rem;
pl-6
padding-left: 1.5rem;
pl-7
padding-left: 1.75rem;
pl-8
padding-left: 2rem;
pl-9
padding-left: 2.25rem;
pl-10
padding-left: 2.5rem;
pl-11
padding-left: 2.75rem;
pl-12
padding-left: 3rem;
pl-13
padding-left: 3.25rem;
pl-14
padding-left: 3.5rem;
pl-15
padding-left: 3.75rem;
pl-16
padding-left: 4rem;
pl-17
padding-left: 4.25rem;
pl-18
padding-left: 4.5rem;
pl-19
padding-left: 4.75rem;
pl-20
padding-left: 5rem;
pl-21
padding-left: 5.25rem;
pl-22
padding-left: 5.5rem;
pl-23
padding-left: 5.75rem;
pl-24
padding-left: 6rem;
pl-25
padding-left: 6.25rem;
pl-26
padding-left: 6.5rem;
pl-27
padding-left: 6.75rem;
pl-28
padding-left: 7rem;
pl-29
padding-left: 7.25rem;
pl-30
padding-left: 7.5rem;
pl-31
padding-left: 7.75rem;
pl-32
padding-left: 8rem;
pl-33
padding-left: 8.25rem;
pl-34
padding-left: 8.5rem;
pl-35
padding-left: 8.75rem;
pl-36
padding-left: 9rem;
pl-37
padding-left: 9.25rem;
pl-38
padding-left: 9.5rem;
pl-39
padding-left: 9.75rem;
pl-40
padding-left: 10rem;
pl-41
padding-left: 10.25rem;
pl-42
padding-left: 10.5rem;
pl-43
padding-left: 10.75rem;
pl-44
padding-left: 11rem;
pl-45
padding-left: 11.25rem;
pl-46
padding-left: 11.5rem;
pl-47
padding-left: 11.75rem;
pl-48
padding-left: 12rem;
pl-49
padding-left: 12.25rem;
pl-50
padding-left: 12.5rem;
pl-51
padding-left: 12.75rem;
pl-52
padding-left: 13rem;
pl-53
padding-left: 13.25rem;
pl-54
padding-left: 13.5rem;
pl-55
padding-left: 13.75rem;
pl-56
padding-left: 14rem;
pl-57
padding-left: 14.25rem;
pl-58
padding-left: 14.5rem;
pl-59
padding-left: 14.75rem;
pl-60
padding-left: 15rem;
pl-61
padding-left: 15.25rem;
pl-62
padding-left: 15.5rem;
pl-63
padding-left: 15.75rem;
pl-64
padding-left: 16rem;
pl-65
padding-left: 16.25rem;
pl-66
padding-left: 16.5rem;
pl-67
padding-left: 16.75rem;
pl-68
padding-left: 17rem;
pl-69
padding-left: 17.25rem;
pl-70
padding-left: 17.5rem;
pl-71
padding-left: 17.75rem;
pl-72
padding-left: 18rem;
pl-73
padding-left: 18.25rem;
pl-74
padding-left: 18.5rem;
pl-75
padding-left: 18.75rem;
pl-76
padding-left: 19rem;
pl-77
padding-left: 19.25rem;
pl-78
padding-left: 19.5rem;
pl-79
padding-left: 19.75rem;
pl-80
padding-left: 20rem;
pl-81
padding-left: 20.25rem;
pl-82
padding-left: 20.5rem;
pl-83
padding-left: 20.75rem;
pl-84
padding-left: 21rem;
pl-85
padding-left: 21.25rem;
pl-86
padding-left: 21.5rem;
pl-87
padding-left: 21.75rem;
pl-88
padding-left: 22rem;
pl-89
padding-left: 22.25rem;
pl-90
padding-left: 22.5rem;
pl-91
padding-left: 22.75rem;
pl-92
padding-left: 23rem;
pl-93
padding-left: 23.25rem;
pl-94
padding-left: 23.5rem;
pl-95
padding-left: 23.75rem;
pl-96
padding-left: 24rem;
pl-97
padding-left: 24.25rem;
pl-98
padding-left: 24.5rem;
pl-99
padding-left: 24.75rem;
pl-100
padding-left: 25rem;
pl-auto
padding-left: auto;
pl-px
padding-left: 1px;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:pl-(value)
Small≥640px
md:pl-(value)
Medium≥768px
lg:pl-(value)
Large≥1024px
xxl:pl-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:pl-(value)