Margin

Utility	Properties
Error: 429

This example sets the margin to 2rem. The element will have a uniform margin around it.

8

<div class="d-f fd-r" id="area">
  <div class="ai-c bg-indigo d-f d-16 jc-c m-8 rad-1 tc-white">8</div>
</div>

Margin Bottom

Controls the bottom margin of an element.

Utility	Properties
Error: 429

This example sets the bottom margin to 2rem. The element will have space below it.

8

<div class="d-f fd-r" id="area">
  <div class="ai-c bg-indigo d-f d-16 jc-c mb-8 rad-1 t-8 tc-white">8</div>
</div>

Margin Left

Controls the left margin of an element.

Utility	Properties
Error: 429

This example sets the left margin to 2rem. The element will have space to its left.

8

<div id="area">
  <div class="ai-c bg-indigo d-f d-16 jc-c ml-8 rad-1 tc-white">8</div>
</div>

Margin Right

Controls the right margin of an element.

Utility	Properties
Error: 429

This example sets the right margin to 2rem. The element will have space to its right.

8

<div id="area">
  <div class="ai-c bg-indigo d-f d-16 jc-c mr-8 rad-1 tc-white">8</div>
</div>

Margin Top

Controls the top margin of an element.

Utility	Properties
Error: 429

This example sets the top margin to 2rem. The element will have space above it.

8

<div class="d-f fd-r" id="area">
  <div class="ai-c bg-indigo d-f d-16 jc-c mt-8 rad-1 t-8 tc-white">8</div>
</div>

Margin Block End

Controls the logical block end margin of an element, which maps to a physical margin depending on the element’s writing mode, directionality, and text orientation.

Utility	Properties
Error: 429

This example sets the margin block end to 2rem. The element will have space below it.

8

<div class="d-f fd-r" id="area">
  <div class="ai-c bg-indigo d-f d-16 jc-c mbe-8 rad-1 t-8 tc-white">8</div>
</div>

Margin Block Start

Controls the logical block start margin of an element, which maps to a physical margin depending on the element’s writing mode, directionality, and text orientation.

Utility	Properties
Error: 429

This example sets the margin block start to 2rem. The element will have space above it.

8

<div class="d-f fd-r" id="area">
  <div class="ai-c bg-indigo d-f d-16 jc-c mbs-8 rad-1 t-8 tc-white">8</div>
</div>

Margin Inline End

Controls the logical inline end margin of an element, which maps to a physical margin depending on the element’s writing mode, directionality, and text orientation.

Utility	Properties
Error: 429

This example sets the margin inline end to 2rem. The element will have space to its right.

8

<div id="area">
  <div class="ai-c bg-indigo d-f d-16 jc-c mie-8 rad-1 tc-white">8</div>
</div>

Margin Inline Start

Controls the logical inline start margin of an element, which maps to a physical margin depending on the element’s writing mode, directionality, and text orientation.

Utility	Properties
Error: 429

This example sets the margin inline start to 2rem. The element will have space to its left.

8

<div id="area">
  <div class="ai-c bg-indigo d-f d-16 jc-c mis-8 rad-1 tc-white">8</div>
</div>

Margin X

Controls the left and right margins of an element at once.

Utility	Properties
Error: 429

This example sets the left and right margins to 2rem. The element will have uniform space on both sides.

8

<div id="area">
  <div class="ai-c bg-indigo d-f d-16 jc-c mx-8 rad-1 tc-white">8</div>
</div>

Margin Y

Controls the bottom and top margins of an element at once.

Utility	Properties
Error: 429

This example sets the bottom and top margins to 2rem. The element will have uniform space above and below it.

8

<div class="d-f fd-r" id="area">
  <div class="ai-c bg-indigo d-f d-16 jc-c my-8 rad-1 tc-white">8</div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Media modifier

You can combine responsive breakpoints like sm:-*,md:-*, lg:-*, and xxl:-* allows targeting specific utilities in different viewports.

<div class="m-1 md:m-2 ..."></div>

Hover modifier

Alternatively, you can apply :hover by using h:-* utility to override elements and change their values when hovering over them.

<div class="m-1 h:m-2 ..."></div>