margin-left
Sets the outer spacing on the left side of an element. Use the prefix ml followed by a value with unit. Useful for indentation, pushing elements to the right, and auto-alignment in flex containers.
Class Patterns
Prefix ml + value + unit. Use px for values under 20px, and rem (1rem = 10px) for 20px and above.
| Class | CSS Output | Description |
|---|---|---|
ml4px | margin-left: 4px | minimum spacing |
ml8px | margin-left: 8px | narrow spacing |
ml12px | margin-left: 12px | default spacing |
ml16px | margin-left: 16px | generous spacing |
ml2rem | margin-left: 2rem (20px) | rem unit starting point |
ml2-4rem | margin-left: 2.4rem (24px) | decimals expressed with hyphens |
ml3-2rem | margin-left: 3.2rem (32px) | wide spacing |
ml4rem | margin-left: 4rem (40px) | large indentation |
mla | margin-left: auto | auto margin (push element right, alignment) |
Unit Comparison
Comparison of the same size expressed in px and rem. Based on: html { font-size: 10px }
| Size | px Class | rem Class |
|---|---|---|
| 8px | ml8px | ml0-8rem |
| 12px | ml12px | ml1-2rem |
| 16px | ml16px | ml1-6rem |
| 20px | ml20px | ml2rem |
| 24px | ml24px | ml2-4rem |
| 32px | ml32px | ml3-2rem |
Common Values
| Class | Actual Size | Usage |
|---|---|---|
ml4px | 4px | Fine text indent |
ml8px | 8px | Gap between inline elements |
ml16px | 16px | Sub-menu indentation |
ml2rem | 20px | Nested list level 1 indent |
ml4rem | 40px | Nested list level 2 indent |
Code Examples
<!-- List indentation -->
<ul class="ml2-4rem">
<li class="mb8px">Item 1</li>
<li class="mb8px">Item 2</li>
<li>Item 3</li>
</ul>
<!-- Comment thread depth -->
<div class="mb8px p16px bg18181B br8px">Original comment</div>
<div class="ml2rem mb8px p16px bg18181B br8px">Reply level 1</div>
<div class="ml4rem mb8px p16px bg18181B br8px">Reply level 2</div>
<!-- Responsive indentation -->
<div class="ml4rem sm-ml2rem">
Desktop 40px, mobile 20px indent
</div>Auto Value
mla applies margin-left: auto. Most commonly used to push elements to the right in flex containers.
<!-- Right-aligned in flex -->
<header class="df aic py16px px2rem">
<div>Logo</div>
<nav class="mla df gap2rem">
<a href="#">Home</a>
<a href="#">About</a>
</nav>
</header>
<!-- Push button to right end -->
<div class="df aic">
<span>Title Text</span>
<button class="mla py8px px16px bg6366F1 cFFFFFF br8px bn cp">Action</button>
</div>Tips & Notes
mla right alignment
Applying mla to an element in a flex container pushes it and subsequent elements to the right edge. A common pattern for placing navigation on the right side of a header.
Using for indentation
In nested lists or comment threads, use ml2rem and ml4rem to express indentation by depth level.