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