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="d-f ai-c jc-c w-16 h-16 m-8 bg-indigo 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="d-f t-8 ai-c jc-c w-16 h-16 mt-8 bg-indigo 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="d-f ai-c jc-c w-16 h-16 mr-8 bg-indigo 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="d-f t-8 ai-c jc-c w-16 h-16 mb-8 bg-indigo 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="d-f ai-c jc-c w-16 h-16 ml-8 bg-indigo 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="d-f t-8 ai-c jc-c w-16 h-16 mbe-8 bg-indigo 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="d-f t-8 ai-c jc-c w-16 h-16 mbs-8 bg-indigo 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="d-f ai-c jc-c w-16 h-16 mie-8 bg-indigo 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="d-f ai-c jc-c w-16 h-16 mis-8 bg-indigo c-white">8</div></div>Margin Inline
Control an element's horizontal margin.
<div> <div class="d-f ai-c jc-c w-16 h-16 mx-8 bg-indigo c-white">8</div></div>Margin Block
Control an element's vertical margin.
<div class="d-f fd-r"> <div class="d-f ai-c jc-c w-16 h-16 my-8 bg-indigo c-white">8</div></div>Responsiveness
Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.
Target viewport sizes with breakpoint prefixes.
sm:m-*md:m-*lg:m-*xxl:m-*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-*Negative Values
Use negative variants to apply negative margins.
Use the -- syntax to apply negative numeric values.
m--*