Margin Inline

Set an element's horizontal margin.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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

Negative Values

Use negative variants to apply negative margins.

Use the -- syntax to apply negative numeric values.

Syntax:mx--(value)