Margin Right

Set an element's right margin.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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

Negative Values

Use negative variants to apply negative margins.

Use the -- syntax to apply negative numeric values.

Syntax:mr--(value)