Spacing

Margin

Can I use ?Can I use ?
classproperties
margin-top:size / mt:sizemargin-top: size
margin-bottom:size / mb:sizemargin-bottom: size
margin-left:size / ml:sizemargin-left: size
margin-right:size / mr:sizemargin-right: size
margin:size / m:sizemargin: size
margin:size|size / m:size|sizemargin: size size
margin:size|size|size / m:size|size|sizemargin: size size size
margin:size|size|size|size / m:size|size|size|sizemargin: size size size size
mx:sizemargin-left: size; margin-right: size
my:sizemargin-top: size; margin-bottom: size

Overview

The margin CSS property shorthand property sets the margin area  on all four sides of an element.

Basic usage

All sides

<div class="">
<div class="flex center-content ...">
    <div class="m:auto w:80 h:80 ...">
    </div>
</div>

Single sides

Using mt, mb, ml, mr to set the margin of single side.

mt:15
ml:15
mb:15
mr:15

Both sides

Using mx, my to set the margin of vertical or horizontal side.

mx:15
mx:15 my:5
my:15
mx:5 my:15
m:0|15
m:5|15
m:15|0
m:15|5

Units

Using units  pxemchrempcptQincmmmvmvhvminvmax%  to set the margin size.

<div class="">
.m\:16 {
    margin: 1rem
}

Applying with functions

<div class="m:$(size)">...</div>

Master supports native CSS variables and functions, just add var(--key) or use shorthand$(key) for variables.

You can also use calc(expression), env(expression) and other CSS functions if the property supports it.

To learn more, see the Functions documentation.

Conditionally apply

States and selectors

<div class="m:10:hover">...</div>

Master supports all native CSS selectors, just add :hover, :disabled, chaining, combinators and other CSS selectors as usual.

To learn more, see the Selectors documentation.

Responsive breakpoints

<div class="m:10@sm">...</div>

Responsive breakpoints can be applied to all styles. Some available breakpoints are 3xs, 2xs, xs, sm,md, lg, xl, 2xl, 3xl, 4xl. Arbitrary breakpoints can be specified through comparison operators >, >=, <, <=.

To learn more, see the Breakpoints documentation.

<div class="m:10@print">...</div>

Master supports media types like print, screen, speech, all, and other media queries.

To learn more, see the Media Queries documentation.

Dark mode and color schemes

<div class="m:10@dark">...</div>

Master uses the selector html.dark to support color schemes. Now, you can easily fine-tune your style for the color schemes.

To learn more, see the Color Schemes documentation.



© Aoyue Design LLC.
Issue on this page
Edited byAronLola