Padding Block

Set an element's vertical padding.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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