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-101
padding-block-start: 25.25rem;
pbs-102
padding-block-start: 25.5rem;
pbs-103
padding-block-start: 25.75rem;
pbs-104
padding-block-start: 26rem;
pbs-105
padding-block-start: 26.25rem;
pbs-106
padding-block-start: 26.5rem;
pbs-107
padding-block-start: 26.75rem;
pbs-108
padding-block-start: 27rem;
pbs-109
padding-block-start: 27.25rem;
pbs-110
padding-block-start: 27.5rem;
pbs-111
padding-block-start: 27.75rem;
pbs-112
padding-block-start: 28rem;
pbs-113
padding-block-start: 28.25rem;
pbs-114
padding-block-start: 28.5rem;
pbs-115
padding-block-start: 28.75rem;
pbs-116
padding-block-start: 29rem;
pbs-117
padding-block-start: 29.25rem;
pbs-118
padding-block-start: 29.5rem;
pbs-119
padding-block-start: 29.75rem;
pbs-120
padding-block-start: 30rem;
pbs-121
padding-block-start: 30.25rem;
pbs-122
padding-block-start: 30.5rem;
pbs-123
padding-block-start: 30.75rem;
pbs-124
padding-block-start: 31rem;
pbs-125
padding-block-start: 31.25rem;
pbs-126
padding-block-start: 31.5rem;
pbs-127
padding-block-start: 31.75rem;
pbs-128
padding-block-start: 32rem;
pbs-129
padding-block-start: 32.25rem;
pbs-130
padding-block-start: 32.5rem;
pbs-131
padding-block-start: 32.75rem;
pbs-132
padding-block-start: 33rem;
pbs-133
padding-block-start: 33.25rem;
pbs-134
padding-block-start: 33.5rem;
pbs-135
padding-block-start: 33.75rem;
pbs-136
padding-block-start: 34rem;
pbs-137
padding-block-start: 34.25rem;
pbs-138
padding-block-start: 34.5rem;
pbs-139
padding-block-start: 34.75rem;
pbs-140
padding-block-start: 35rem;
pbs-141
padding-block-start: 35.25rem;
pbs-142
padding-block-start: 35.5rem;
pbs-143
padding-block-start: 35.75rem;
pbs-144
padding-block-start: 36rem;
pbs-145
padding-block-start: 36.25rem;
pbs-146
padding-block-start: 36.5rem;
pbs-147
padding-block-start: 36.75rem;
pbs-148
padding-block-start: 37rem;
pbs-149
padding-block-start: 37.25rem;
pbs-150
padding-block-start: 37.5rem;
pbs-151
padding-block-start: 37.75rem;
pbs-152
padding-block-start: 38rem;
pbs-153
padding-block-start: 38.25rem;
pbs-154
padding-block-start: 38.5rem;
pbs-155
padding-block-start: 38.75rem;
pbs-156
padding-block-start: 39rem;
pbs-157
padding-block-start: 39.25rem;
pbs-158
padding-block-start: 39.5rem;
pbs-159
padding-block-start: 39.75rem;
pbs-160
padding-block-start: 40rem;
pbs-161
padding-block-start: 40.25rem;
pbs-162
padding-block-start: 40.5rem;
pbs-163
padding-block-start: 40.75rem;
pbs-164
padding-block-start: 41rem;
pbs-165
padding-block-start: 41.25rem;
pbs-166
padding-block-start: 41.5rem;
pbs-167
padding-block-start: 41.75rem;
pbs-168
padding-block-start: 42rem;
pbs-169
padding-block-start: 42.25rem;
pbs-170
padding-block-start: 42.5rem;
pbs-171
padding-block-start: 42.75rem;
pbs-172
padding-block-start: 43rem;
pbs-173
padding-block-start: 43.25rem;
pbs-174
padding-block-start: 43.5rem;
pbs-175
padding-block-start: 43.75rem;
pbs-176
padding-block-start: 44rem;
pbs-177
padding-block-start: 44.25rem;
pbs-178
padding-block-start: 44.5rem;
pbs-179
padding-block-start: 44.75rem;
pbs-180
padding-block-start: 45rem;
pbs-181
padding-block-start: 45.25rem;
pbs-182
padding-block-start: 45.5rem;
pbs-183
padding-block-start: 45.75rem;
pbs-184
padding-block-start: 46rem;
pbs-185
padding-block-start: 46.25rem;
pbs-186
padding-block-start: 46.5rem;
pbs-187
padding-block-start: 46.75rem;
pbs-188
padding-block-start: 47rem;
pbs-189
padding-block-start: 47.25rem;
pbs-190
padding-block-start: 47.5rem;
pbs-191
padding-block-start: 47.75rem;
pbs-192
padding-block-start: 48rem;
pbs-193
padding-block-start: 48.25rem;
pbs-194
padding-block-start: 48.5rem;
pbs-195
padding-block-start: 48.75rem;
pbs-196
padding-block-start: 49rem;
pbs-197
padding-block-start: 49.25rem;
pbs-198
padding-block-start: 49.5rem;
pbs-199
padding-block-start: 49.75rem;
pbs-200
padding-block-start: 50rem;
pbs-201
padding-block-start: 50.25rem;
pbs-202
padding-block-start: 50.5rem;
pbs-203
padding-block-start: 50.75rem;
pbs-204
padding-block-start: 51rem;
pbs-205
padding-block-start: 51.25rem;
pbs-206
padding-block-start: 51.5rem;
pbs-207
padding-block-start: 51.75rem;
pbs-208
padding-block-start: 52rem;
pbs-209
padding-block-start: 52.25rem;
pbs-210
padding-block-start: 52.5rem;
pbs-211
padding-block-start: 52.75rem;
pbs-212
padding-block-start: 53rem;
pbs-213
padding-block-start: 53.25rem;
pbs-214
padding-block-start: 53.5rem;
pbs-215
padding-block-start: 53.75rem;
pbs-216
padding-block-start: 54rem;
pbs-217
padding-block-start: 54.25rem;
pbs-218
padding-block-start: 54.5rem;
pbs-219
padding-block-start: 54.75rem;
pbs-220
padding-block-start: 55rem;
pbs-221
padding-block-start: 55.25rem;
pbs-222
padding-block-start: 55.5rem;
pbs-223
padding-block-start: 55.75rem;
pbs-224
padding-block-start: 56rem;
pbs-225
padding-block-start: 56.25rem;
pbs-226
padding-block-start: 56.5rem;
pbs-227
padding-block-start: 56.75rem;
pbs-228
padding-block-start: 57rem;
pbs-229
padding-block-start: 57.25rem;
pbs-230
padding-block-start: 57.5rem;
pbs-231
padding-block-start: 57.75rem;
pbs-232
padding-block-start: 58rem;
pbs-233
padding-block-start: 58.25rem;
pbs-234
padding-block-start: 58.5rem;
pbs-235
padding-block-start: 58.75rem;
pbs-236
padding-block-start: 59rem;
pbs-237
padding-block-start: 59.25rem;
pbs-238
padding-block-start: 59.5rem;
pbs-239
padding-block-start: 59.75rem;
pbs-240
padding-block-start: 60rem;
pbs-241
padding-block-start: 60.25rem;
pbs-242
padding-block-start: 60.5rem;
pbs-243
padding-block-start: 60.75rem;
pbs-244
padding-block-start: 61rem;
pbs-245
padding-block-start: 61.25rem;
pbs-246
padding-block-start: 61.5rem;
pbs-247
padding-block-start: 61.75rem;
pbs-248
padding-block-start: 62rem;
pbs-249
padding-block-start: 62.25rem;
pbs-250
padding-block-start: 62.5rem;
pbs-251
padding-block-start: 62.75rem;
pbs-252
padding-block-start: 63rem;
pbs-253
padding-block-start: 63.25rem;
pbs-254
padding-block-start: 63.5rem;
pbs-255
padding-block-start: 63.75rem;
pbs-256
padding-block-start: 64rem;
pbs-257
padding-block-start: 64.25rem;
pbs-258
padding-block-start: 64.5rem;
pbs-259
padding-block-start: 64.75rem;
pbs-260
padding-block-start: 65rem;
pbs-261
padding-block-start: 65.25rem;
pbs-262
padding-block-start: 65.5rem;
pbs-263
padding-block-start: 65.75rem;
pbs-264
padding-block-start: 66rem;
pbs-265
padding-block-start: 66.25rem;
pbs-266
padding-block-start: 66.5rem;
pbs-267
padding-block-start: 66.75rem;
pbs-268
padding-block-start: 67rem;
pbs-269
padding-block-start: 67.25rem;
pbs-270
padding-block-start: 67.5rem;
pbs-271
padding-block-start: 67.75rem;
pbs-272
padding-block-start: 68rem;
pbs-273
padding-block-start: 68.25rem;
pbs-274
padding-block-start: 68.5rem;
pbs-275
padding-block-start: 68.75rem;
pbs-276
padding-block-start: 69rem;
pbs-277
padding-block-start: 69.25rem;
pbs-278
padding-block-start: 69.5rem;
pbs-279
padding-block-start: 69.75rem;
pbs-280
padding-block-start: 70rem;
pbs-281
padding-block-start: 70.25rem;
pbs-282
padding-block-start: 70.5rem;
pbs-283
padding-block-start: 70.75rem;
pbs-284
padding-block-start: 71rem;
pbs-285
padding-block-start: 71.25rem;
pbs-286
padding-block-start: 71.5rem;
pbs-287
padding-block-start: 71.75rem;
pbs-288
padding-block-start: 72rem;
pbs-289
padding-block-start: 72.25rem;
pbs-290
padding-block-start: 72.5rem;
pbs-291
padding-block-start: 72.75rem;
pbs-292
padding-block-start: 73rem;
pbs-293
padding-block-start: 73.25rem;
pbs-294
padding-block-start: 73.5rem;
pbs-295
padding-block-start: 73.75rem;
pbs-296
padding-block-start: 74rem;
pbs-297
padding-block-start: 74.25rem;
pbs-298
padding-block-start: 74.5rem;
pbs-299
padding-block-start: 74.75rem;
pbs-300
padding-block-start: 75rem;
pbs-301
padding-block-start: 75.25rem;
pbs-302
padding-block-start: 75.5rem;
pbs-303
padding-block-start: 75.75rem;
pbs-304
padding-block-start: 76rem;
pbs-305
padding-block-start: 76.25rem;
pbs-306
padding-block-start: 76.5rem;
pbs-307
padding-block-start: 76.75rem;
pbs-308
padding-block-start: 77rem;
pbs-309
padding-block-start: 77.25rem;
pbs-310
padding-block-start: 77.5rem;
pbs-311
padding-block-start: 77.75rem;
pbs-312
padding-block-start: 78rem;
pbs-313
padding-block-start: 78.25rem;
pbs-314
padding-block-start: 78.5rem;
pbs-315
padding-block-start: 78.75rem;
pbs-316
padding-block-start: 79rem;
pbs-317
padding-block-start: 79.25rem;
pbs-318
padding-block-start: 79.5rem;
pbs-319
padding-block-start: 79.75rem;
pbs-320
padding-block-start: 80rem;
pbs-321
padding-block-start: 80.25rem;
pbs-322
padding-block-start: 80.5rem;
pbs-323
padding-block-start: 80.75rem;
pbs-324
padding-block-start: 81rem;
pbs-325
padding-block-start: 81.25rem;
pbs-326
padding-block-start: 81.5rem;
pbs-327
padding-block-start: 81.75rem;
pbs-328
padding-block-start: 82rem;
pbs-329
padding-block-start: 82.25rem;
pbs-330
padding-block-start: 82.5rem;
pbs-331
padding-block-start: 82.75rem;
pbs-332
padding-block-start: 83rem;
pbs-333
padding-block-start: 83.25rem;
pbs-334
padding-block-start: 83.5rem;
pbs-335
padding-block-start: 83.75rem;
pbs-336
padding-block-start: 84rem;
pbs-337
padding-block-start: 84.25rem;
pbs-338
padding-block-start: 84.5rem;
pbs-339
padding-block-start: 84.75rem;
pbs-340
padding-block-start: 85rem;
pbs-341
padding-block-start: 85.25rem;
pbs-342
padding-block-start: 85.5rem;
pbs-343
padding-block-start: 85.75rem;
pbs-344
padding-block-start: 86rem;
pbs-345
padding-block-start: 86.25rem;
pbs-346
padding-block-start: 86.5rem;
pbs-347
padding-block-start: 86.75rem;
pbs-348
padding-block-start: 87rem;
pbs-349
padding-block-start: 87.25rem;
pbs-350
padding-block-start: 87.5rem;
pbs-351
padding-block-start: 87.75rem;
pbs-352
padding-block-start: 88rem;
pbs-353
padding-block-start: 88.25rem;
pbs-354
padding-block-start: 88.5rem;
pbs-355
padding-block-start: 88.75rem;
pbs-356
padding-block-start: 89rem;
pbs-357
padding-block-start: 89.25rem;
pbs-358
padding-block-start: 89.5rem;
pbs-359
padding-block-start: 89.75rem;
pbs-360
padding-block-start: 90rem;
pbs-361
padding-block-start: 90.25rem;
pbs-362
padding-block-start: 90.5rem;
pbs-363
padding-block-start: 90.75rem;
pbs-364
padding-block-start: 91rem;
pbs-365
padding-block-start: 91.25rem;
pbs-366
padding-block-start: 91.5rem;
pbs-367
padding-block-start: 91.75rem;
pbs-368
padding-block-start: 92rem;
pbs-369
padding-block-start: 92.25rem;
pbs-370
padding-block-start: 92.5rem;
pbs-371
padding-block-start: 92.75rem;
pbs-372
padding-block-start: 93rem;
pbs-373
padding-block-start: 93.25rem;
pbs-374
padding-block-start: 93.5rem;
pbs-375
padding-block-start: 93.75rem;
pbs-376
padding-block-start: 94rem;
pbs-377
padding-block-start: 94.25rem;
pbs-378
padding-block-start: 94.5rem;
pbs-379
padding-block-start: 94.75rem;
pbs-380
padding-block-start: 95rem;
pbs-381
padding-block-start: 95.25rem;
pbs-382
padding-block-start: 95.5rem;
pbs-383
padding-block-start: 95.75rem;
pbs-384
padding-block-start: 96rem;
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)