Padding Block End

Set an element's logical block end padding.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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