Padding Inline End

Set an element's logical inline end padding.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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