Padding Inline

Set an element's horizontal padding.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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