Padding Inline Start

Set an element's logical inline start padding.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

sm:pis-(value)
Small≥640px
md:pis-(value)
Medium≥768px
lg:pis-(value)
Large≥1024px
xxl:pis-(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:pis-(value)