Margin

Utility	Properties
Failed to load data. Please try again later.

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
Failed to load data. Please try again later.

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
Failed to load data. Please try again later.

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
Failed to load data. Please try again later.

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
Failed to load data. Please try again later.

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
Failed to load data. Please try again later.

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
Failed to load data. Please try again later.

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
Failed to load data. Please try again later.

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
Failed to load data. Please try again later.

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
Failed to load data. Please try again later.

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
Failed to load data. Please try again later.

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>