Margin

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

Margin Top

Controls the margin to the top of an element.

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

Margin Right

Controls the margin to the right of an element.

<div>
  <div class="ai-c bg-indigo d-f d-16 jc-c mr-8 c-white">8</div>
</div>

Margin Bottom

Controls the margin to the bottom of an element.

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

Margin Left

Controls the margin to the left of an element.

<div>
  <div class="ai-c bg-indigo d-f d-16 jc-c ml-8 c-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">
  <div class="ai-c bg-indigo d-f d-16 jc-c mbe-8 t-8 c-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">
  <div class="ai-c bg-indigo d-f d-16 jc-c mbs-8 t-8 c-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>
  <div class="ai-c bg-indigo d-f d-16 jc-c mie-8 c-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>
  <div class="ai-c bg-indigo d-f d-16 jc-c mis-8 c-white">8</div>
</div>

Margin X

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

<div>
  <div class="ai-c bg-indigo d-f d-16 jc-c mx-8 c-white">8</div>
</div>

Margin Y

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

<div class="d-f fd-r">
  <div class="ai-c bg-indigo d-f d-16 jc-c my-8 c-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.

Responsive design

Target different screen sizes by adding breakpoint prefixes. Styles apply from the specified breakpoint and up.

Target specific viewport sizes with breakpoint prefixes

Hover state variant

Apply styles conditionally when users hover over an element using the h: prefix.