Padding Inline End

Set an element's logical inline end padding.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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