Padding Right

Set an element's right padding.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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