Padding Inline Start

Set an element's logical inline start padding.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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