Margin

<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 margin to the bottom of an element.

<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 margin to the left of an element.

<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 margin to the right of an element.

<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 margin to the top of an element.

<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.

<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.

<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.

<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.

<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.

<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.

<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>

Using utility variants

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

Using media queries

Using hover states