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-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)