Margin Left

Set an element's left margin.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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

Negative Values

Use negative variants to apply negative margins.

Use the -- syntax to apply negative numeric values.

Syntax:ml--(value)