Margin Block Start

Set an element's logical block start margin.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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

Negative Values

Use negative variants to apply negative margins.

Use the -- syntax to apply negative numeric values.

Syntax:mbs--(value)