Margin Left

Set an element's left margin.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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

Negative Values

Use negative variants to apply negative margins.

Use the -- syntax to apply negative numeric values.

Syntax:ml--(value)