Margin Inline

Set an element's horizontal margin.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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

Negative Values

Use negative variants to apply negative margins.

Use the -- syntax to apply negative numeric values.

Syntax:mx--(value)