Margin

Set the margin for an element.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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

Negative Values

Use negative variants to apply negative margins.

Use the -- syntax to apply negative numeric values.

Syntax:m--(value)