Padding Block Start

Set an element's logical block start padding.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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