Margin Inline End

Set an element's logical inline end margin.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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

Negative Values

Use negative variants to apply negative margins.

Use the -- syntax to apply negative numeric values.

Syntax:mie--(value)