Margin
Set the margin for an element.
Widely available
This feature is well established and works across many devices and browser versions.
Usage
<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
Control an element's top margin.
Widely available
This feature is well established and works across many devices and browser versions.
<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
Control an element's right margin.
Widely available
This feature is well established and works across many devices and browser versions.
<div> <div class="ai-c bg-indigo d-f d-16 jc-c mr-8 c-white">8</div></div>Margin Bottom
Control an element's bottom margin.
Widely available
This feature is well established and works across many devices and browser versions.
<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
Control an element's left margin.
Widely available
This feature is well established and works across many devices and browser versions.
<div> <div class="ai-c bg-indigo d-f d-16 jc-c ml-8 c-white">8</div></div>Margin Block End
Control an element's logical block end margin.
Widely available
This feature is well established and works across many devices and browser versions.
<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
Control an element's logical block start margin.
Widely available
This feature is well established and works across many devices and browser versions.
<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
Control an element's logical inline end margin.
Widely available
This feature is well established and works across many devices and browser versions.
<div> <div class="ai-c bg-indigo d-f d-16 jc-c mie-8 c-white">8</div></div>Margin Inline Start
Control an element's logical inline start margin.
Widely available
This feature is well established and works across many devices and browser versions.
<div> <div class="ai-c bg-indigo d-f d-16 jc-c mis-8 c-white">8</div></div>Margin Inline
Control an element's horizontal margin.
<div> <div class="ai-c bg-indigo d-f d-16 jc-c mx-8 c-white">8</div></div>Margin Block
Control an element's vertical margin.
<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>Responsive Design
Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.
Target viewport sizes with breakpoint prefixes.
sm:m-[value]md:m-[value]lg:m-[value]xxl:m-[value]Hover State
Apply styles conditionally on hover using the h: prefix.
Add the h: prefix to apply styles only when the user hovers over the element.
h:m-[value]Negative Values
Use negative variants to apply negative margins.
Use the -- syntax to apply negative numeric values.
m--[value]