Margin Top

Set an element's top margin.

Widely available

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

Chrome
Edge
Firefox
Safari

mt-0
margin-top: 0;
mt-1
margin-top: .25rem;
mt-2
margin-top: .5rem;
mt-3
margin-top: .75rem;
mt-4
margin-top: 1rem;
mt-5
margin-top: 1.25rem;
mt-6
margin-top: 1.5rem;
mt-7
margin-top: 1.75rem;
mt-8
margin-top: 2rem;
mt-9
margin-top: 2.25rem;
mt-10
margin-top: 2.5rem;
mt-11
margin-top: 2.75rem;
mt-12
margin-top: 3rem;
mt-13
margin-top: 3.25rem;
mt-14
margin-top: 3.5rem;
mt-15
margin-top: 3.75rem;
mt-16
margin-top: 4rem;
mt-17
margin-top: 4.25rem;
mt-18
margin-top: 4.5rem;
mt-19
margin-top: 4.75rem;
mt-20
margin-top: 5rem;
mt-21
margin-top: 5.25rem;
mt-22
margin-top: 5.5rem;
mt-23
margin-top: 5.75rem;
mt-24
margin-top: 6rem;
mt-25
margin-top: 6.25rem;
mt-26
margin-top: 6.5rem;
mt-27
margin-top: 6.75rem;
mt-28
margin-top: 7rem;
mt-29
margin-top: 7.25rem;
mt-30
margin-top: 7.5rem;
mt-31
margin-top: 7.75rem;
mt-32
margin-top: 8rem;
mt-33
margin-top: 8.25rem;
mt-34
margin-top: 8.5rem;
mt-35
margin-top: 8.75rem;
mt-36
margin-top: 9rem;
mt-37
margin-top: 9.25rem;
mt-38
margin-top: 9.5rem;
mt-39
margin-top: 9.75rem;
mt-40
margin-top: 10rem;
mt-41
margin-top: 10.25rem;
mt-42
margin-top: 10.5rem;
mt-43
margin-top: 10.75rem;
mt-44
margin-top: 11rem;
mt-45
margin-top: 11.25rem;
mt-46
margin-top: 11.5rem;
mt-47
margin-top: 11.75rem;
mt-48
margin-top: 12rem;
mt-49
margin-top: 12.25rem;
mt-50
margin-top: 12.5rem;
mt-51
margin-top: 12.75rem;
mt-52
margin-top: 13rem;
mt-53
margin-top: 13.25rem;
mt-54
margin-top: 13.5rem;
mt-55
margin-top: 13.75rem;
mt-56
margin-top: 14rem;
mt-57
margin-top: 14.25rem;
mt-58
margin-top: 14.5rem;
mt-59
margin-top: 14.75rem;
mt-60
margin-top: 15rem;
mt-61
margin-top: 15.25rem;
mt-62
margin-top: 15.5rem;
mt-63
margin-top: 15.75rem;
mt-64
margin-top: 16rem;
mt-65
margin-top: 16.25rem;
mt-66
margin-top: 16.5rem;
mt-67
margin-top: 16.75rem;
mt-68
margin-top: 17rem;
mt-69
margin-top: 17.25rem;
mt-70
margin-top: 17.5rem;
mt-71
margin-top: 17.75rem;
mt-72
margin-top: 18rem;
mt-73
margin-top: 18.25rem;
mt-74
margin-top: 18.5rem;
mt-75
margin-top: 18.75rem;
mt-76
margin-top: 19rem;
mt-77
margin-top: 19.25rem;
mt-78
margin-top: 19.5rem;
mt-79
margin-top: 19.75rem;
mt-80
margin-top: 20rem;
mt-81
margin-top: 20.25rem;
mt-82
margin-top: 20.5rem;
mt-83
margin-top: 20.75rem;
mt-84
margin-top: 21rem;
mt-85
margin-top: 21.25rem;
mt-86
margin-top: 21.5rem;
mt-87
margin-top: 21.75rem;
mt-88
margin-top: 22rem;
mt-89
margin-top: 22.25rem;
mt-90
margin-top: 22.5rem;
mt-91
margin-top: 22.75rem;
mt-92
margin-top: 23rem;
mt-93
margin-top: 23.25rem;
mt-94
margin-top: 23.5rem;
mt-95
margin-top: 23.75rem;
mt-96
margin-top: 24rem;
mt-97
margin-top: 24.25rem;
mt-98
margin-top: 24.5rem;
mt-99
margin-top: 24.75rem;
mt-100
margin-top: 25rem;
mt-auto
margin-top: auto;
mt-px
margin-top: 1px;

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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

Negative Values

Use negative variants to apply negative margins.

Use the -- syntax to apply negative numeric values.

Syntax:mt--(value)