Tools Module For CSS Vertical Space.

sircus-tools-space | v3.0.0

margin: [top|left|bottom|right]

t-ma0

t-maMi

t-maTn

t-maXs

t-maSm

t-maMd

t-maLg

t-maXl

t-maHg

t-maGt

<div class="t-ma0">...</div>
<div class="t-maXs">...</div>
<div class="t-maSm">...</div>
<div class="t-maMd">...</div>
<div class="t-maLg">...</div>
<div class="t-maXl">...</div>
<div class="t-maHg">...</div>
<div class="t-maGt">...</div>

margin: top

t-mt0

t-mtMi

t-mtTn

t-mtXs

t-mtSm

t-mtMd

t-mtLg

t-mtXl

t-mtHg

t-mtGt

<div class="t-mt0">...</div>
<div class="t-mtXs">...</div>
<div class="t-mtSm">...</div>
<div class="t-mtMd">...</div>
<div class="t-mtLg">...</div>
<div class="t-mtXl">...</div>
<div class="t-mtHg">...</div>
<div class="t-mtGt">...</div>

margin: bottom

t-mb0

t-mbMi

t-mbTn

t-mbXs

t-mbSm

t-mbMd

t-mbLg

t-mbXl

t-mbHg

t-mbGt

<div class="t-mb0">...</div>
<div class="t-mbXs">...</div>
<div class="t-mbSm">...</div>
<div class="t-mbMd">...</div>
<div class="t-mbLg">...</div>
<div class="t-mbXl">...</div>
<div class="t-mbHg">...</div>
<div class="t-mbGt">...</div>

padding: [top|left|bottom|right]

t-pa0
t-paMi
t-paTn
t-paXs
t-paSm
t-paMd
t-paLg
t-paXl
t-paHg
t-paGt
<div class="t-pa0">...</div>
<div class="t-paXs">...</div>
<div class="t-paSm">...</div>
<div class="t-paMd">...</div>
<div class="t-paLg">...</div>
<div class="t-paXl">...</div>
<div class="t-paHg">...</div>
<div class="t-paGt">...</div>

padding: top

t-pt0
t-ptMi
t-ptTn
t-ptXs
t-ptSm
t-ptMd
t-ptLg
t-ptXl
t-ptHg
t-ptGt
<div class="t-pt0">...</div>
<div class="t-ptXs">...</div>
<div class="t-ptSm">...</div>
<div class="t-ptMd">...</div>
<div class="t-ptLg">...</div>
<div class="t-ptXl">...</div>
<div class="t-ptHg">...</div>
<div class="t-ptGt">...</div>

padding: bottom

t-pb0
t-pbMi
t-pbTn
t-pbXs
t-pbSm
t-pbMd
t-pbLg
t-pbXl
t-pbHg
t-pbGt
<div class="t-pb0">...</div>
<div class="t-pbXs">...</div>
<div class="t-pbSm">...</div>
<div class="t-pbMd">...</div>
<div class="t-pbLg">...</div>
<div class="t-pbXl">...</div>
<div class="t-pbHg">...</div>
<div class="t-pbGt">...</div>

Abbreviations

Size level Suffix

Install

npm install sircus-tools-space sircus-variables

CSS import

@import "sircus-tools-space";
@import "sircus-tools-space/responsive";
@import "sircus-variables";

CSS

/*
 * sircus-tools-space
 ================================================== */
.t-ma0    { margin: 0 !important; }
.t-maMi   { margin: var(--space-mi) !important; }
.t-maTn   { margin: var(--space-tn) !important; }
.t-maXs   { margin: var(--space-xs) !important; }
.t-maSm   { margin: var(--space-sm) !important; }
.t-maMd   { margin: var(--space-md) !important; }
.t-maLg   { margin: var(--space-lg) !important; }
.t-maXl   { margin: var(--space-xl) !important; }
.t-maHg   { margin: var(--space-hg) !important; }
.t-maGt   { margin: var(--space-gt) !important; }

.t-mt0    { margin-top: 0 !important; }
.t-mtMi   { margin-top: var(--space-mi) !important; }
.t-mtTn   { margin-top: var(--space-tn) !important; }
.t-mtXs   { margin-top: var(--space-xs) !important; }
.t-mtSm   { margin-top: var(--space-sm) !important; }
.t-mtMd   { margin-top: var(--space-md) !important; }
.t-mtLg   { margin-top: var(--space-lg) !important; }
.t-mtXl   { margin-top: var(--space-xl) !important; }
.t-mtHg   { margin-top: var(--space-hg) !important; }
.t-mtGt   { margin-top: var(--space-gt) !important; }

.t-mb0    { margin-bottom: 0 !important; }
.t-mbMi   { margin-bottom: var(--space-mi) !important; }
.t-mbTn   { margin-bottom: var(--space-tn) !important; }
.t-mbXs   { margin-bottom: var(--space-xs) !important; }
.t-mbSm   { margin-bottom: var(--space-sm) !important; }
.t-mbMd   { margin-bottom: var(--space-md) !important; }
.t-mbLg   { margin-bottom: var(--space-lg) !important; }
.t-mbXl   { margin-bottom: var(--space-xl) !important; }
.t-mbHg   { margin-bottom: var(--space-hg) !important; }
.t-mbGt   { margin-bottom: var(--space-gt) !important; }

.t-pa0    { padding: 0 !important; }
.t-paMi   { padding: var(--space-mi) !important; }
.t-paTn   { padding: var(--space-tn) !important; }
.t-paXs   { padding: var(--space-xs) !important; }
.t-paSm   { padding: var(--space-sm) !important; }
.t-paMd   { padding: var(--space-md) !important; }
.t-paLg   { padding: var(--space-lg) !important; }
.t-paXl   { padding: var(--space-xl) !important; }
.t-paHg   { padding: var(--space-hg) !important; }
.t-paGt   { padding: var(--space-gt) !important; }

.t-pt0    { padding-top: 0 !important; }
.t-ptMi   { padding-top: var(--space-mi) !important; }
.t-ptTn   { padding-top: var(--space-tn) !important; }
.t-ptXs   { padding-top: var(--space-xs) !important; }
.t-ptSm   { padding-top: var(--space-sm) !important; }
.t-ptMd   { padding-top: var(--space-md) !important; }
.t-ptLg   { padding-top: var(--space-lg) !important; }
.t-ptXl   { padding-top: var(--space-xl) !important; }
.t-ptHg   { padding-top: var(--space-hg) !important; }
.t-ptGt   { padding-top: var(--space-gt) !important; }

.t-pb0    { padding-bottom: 0 !important; }
.t-pbMi   { padding-bottom: var(--space-mi) !important; }
.t-pbTn   { padding-bottom: var(--space-tn) !important; }
.t-pbXs   { padding-bottom: var(--space-xs) !important; }
.t-pbSm   { padding-bottom: var(--space-sm) !important; }
.t-pbMd   { padding-bottom: var(--space-md) !important; }
.t-pbLg   { padding-bottom: var(--space-lg) !important; }
.t-pbXl   { padding-bottom: var(--space-xl) !important; }
.t-pbHg   { padding-bottom: var(--space-hg) !important; }
.t-pbGt   { padding-bottom: var(--space-gt) !important; }

Responsive CSS

@media (--viewport-sm) {
  .t-sm-ma0    { margin: 0 !important; }
  .t-sm-maMi   { margin: var(--space-mi) !important; }
  .t-sm-maTn   { margin: var(--space-tn) !important; }
  .t-sm-maXs   { margin: var(--space-xs) !important; }
  .t-sm-maSm   { margin: var(--space-sm) !important; }
  .t-sm-maMd   { margin: var(--space-md) !important; }
  .t-sm-maLg   { margin: var(--space-lg) !important; }
  .t-sm-maXl   { margin: var(--space-xl) !important; }
  .t-sm-maHg   { margin: var(--space-hg) !important; }
  .t-sm-maGt   { margin: var(--space-gt) !important; }

  .t-sm-mt0    { margin-top: 0 !important; }
  .t-sm-mtMi   { margin-top: var(--space-mi) !important; }
  .t-sm-mtTn   { margin-top: var(--space-tn) !important; }
  .t-sm-mtXs   { margin-top: var(--space-xs) !important; }
  .t-sm-mtSm   { margin-top: var(--space-sm) !important; }
  .t-sm-mtMd   { margin-top: var(--space-md) !important; }
  .t-sm-mtLg   { margin-top: var(--space-lg) !important; }
  .t-sm-mtXl   { margin-top: var(--space-xl) !important; }
  .t-sm-mtHg   { margin-top: var(--space-hg) !important; }
  .t-sm-mtGt   { margin-top: var(--space-gt) !important; }

  .t-sm-mb0    { margin-bottom: 0 !important; }
  .t-sm-mbMi   { margin-bottom: var(--space-mi) !important; }
  .t-sm-mbTn   { margin-bottom: var(--space-tn) !important; }
  .t-sm-mbXs   { margin-bottom: var(--space-xs) !important; }
  .t-sm-mbSm   { margin-bottom: var(--space-sm) !important; }
  .t-sm-mbMd   { margin-bottom: var(--space-md) !important; }
  .t-sm-mbLg   { margin-bottom: var(--space-lg) !important; }
  .t-sm-mbXl   { margin-bottom: var(--space-xl) !important; }
  .t-sm-mbHg   { margin-bottom: var(--space-hg) !important; }
  .t-sm-mbGt   { margin-bottom: var(--space-gt) !important; }

  .t-sm-pa0    { padding: 0 !important; }
  .t-sm-paMi   { padding: var(--space-mi) !important; }
  .t-sm-paTn   { padding: var(--space-tn) !important; }
  .t-sm-paXs   { padding: var(--space-xs) !important; }
  .t-sm-paSm   { padding: var(--space-sm) !important; }
  .t-sm-paMd   { padding: var(--space-md) !important; }
  .t-sm-paLg   { padding: var(--space-lg) !important; }
  .t-sm-paXl   { padding: var(--space-xl) !important; }
  .t-sm-paHg   { padding: var(--space-hg) !important; }
  .t-sm-paGt   { padding: var(--space-gt) !important; }

  .t-sm-pt0    { padding-top: 0 !important; }
  .t-sm-ptMi   { padding-top: var(--space-mi) !important; }
  .t-sm-ptTn   { padding-top: var(--space-tn) !important; }
  .t-sm-ptXs   { padding-top: var(--space-xs) !important; }
  .t-sm-ptSm   { padding-top: var(--space-sm) !important; }
  .t-sm-ptMd   { padding-top: var(--space-md) !important; }
  .t-sm-ptLg   { padding-top: var(--space-lg) !important; }
  .t-sm-ptXl   { padding-top: var(--space-xl) !important; }
  .t-sm-ptHg   { padding-top: var(--space-hg) !important; }
  .t-sm-ptGt   { padding-top: var(--space-gt) !important; }

  .t-sm-pb0    { padding-bottom: 0 !important; }
  .t-sm-pbMi   { padding-bottom: var(--space-mi) !important; }
  .t-sm-pbTn   { padding-bottom: var(--space-tn) !important; }
  .t-sm-pbXs   { padding-bottom: var(--space-xs) !important; }
  .t-sm-pbSm   { padding-bottom: var(--space-sm) !important; }
  .t-sm-pbMd   { padding-bottom: var(--space-md) !important; }
  .t-sm-pbLg   { padding-bottom: var(--space-lg) !important; }
  .t-sm-pbXl   { padding-bottom: var(--space-xl) !important; }
  .t-sm-pbHg   { padding-bottom: var(--space-hg) !important; }
  .t-sm-pbGt   { padding-bottom: var(--space-gt) !important; }
}

@media (--viewport-md) {
  .t-md-ma0    { margin: 0 !important; }
  .t-md-maMi   { margin: var(--space-mi) !important; }
  .t-md-maTn   { margin: var(--space-tn) !important; }
  .t-md-maXs   { margin: var(--space-xs) !important; }
  .t-md-maSm   { margin: var(--space-sm) !important; }
  .t-md-maMd   { margin: var(--space-md) !important; }
  .t-md-maLg   { margin: var(--space-lg) !important; }
  .t-md-maXl   { margin: var(--space-xl) !important; }
  .t-md-maHg   { margin: var(--space-hg) !important; }
  .t-md-maGt   { margin: var(--space-gt) !important; }

  .t-md-mt0    { margin-top: 0 !important; }
  .t-md-mtMi   { margin-top: var(--space-mi) !important; }
  .t-md-mtTn   { margin-top: var(--space-tn) !important; }
  .t-md-mtXs   { margin-top: var(--space-xs) !important; }
  .t-md-mtSm   { margin-top: var(--space-sm) !important; }
  .t-md-mtMd   { margin-top: var(--space-md) !important; }
  .t-md-mtLg   { margin-top: var(--space-lg) !important; }
  .t-md-mtXl   { margin-top: var(--space-xl) !important; }
  .t-md-mtHg   { margin-top: var(--space-hg) !important; }
  .t-md-mtGt   { margin-top: var(--space-gt) !important; }

  .t-md-mb0    { margin-bottom: 0 !important; }
  .t-md-mbMi   { margin-bottom: var(--space-mi) !important; }
  .t-md-mbTn   { margin-bottom: var(--space-tn) !important; }
  .t-md-mbXs   { margin-bottom: var(--space-xs) !important; }
  .t-md-mbSm   { margin-bottom: var(--space-sm) !important; }
  .t-md-mbMd   { margin-bottom: var(--space-md) !important; }
  .t-md-mbLg   { margin-bottom: var(--space-lg) !important; }
  .t-md-mbXl   { margin-bottom: var(--space-xl) !important; }
  .t-md-mbHg   { margin-bottom: var(--space-hg) !important; }
  .t-md-mbGt   { margin-bottom: var(--space-gt) !important; }

  .t-md-pa0    { padding: 0 !important; }
  .t-md-paMi   { padding: var(--space-mi) !important; }
  .t-md-paTn   { padding: var(--space-tn) !important; }
  .t-md-paXs   { padding: var(--space-xs) !important; }
  .t-md-paSm   { padding: var(--space-sm) !important; }
  .t-md-paMd   { padding: var(--space-md) !important; }
  .t-md-paLg   { padding: var(--space-lg) !important; }
  .t-md-paXl   { padding: var(--space-xl) !important; }
  .t-md-paHg   { padding: var(--space-hg) !important; }
  .t-md-paGt   { padding: var(--space-gt) !important; }

  .t-md-pt0    { padding-top: 0 !important; }
  .t-md-ptMi   { padding-top: var(--space-mi) !important; }
  .t-md-ptTn   { padding-top: var(--space-tn) !important; }
  .t-md-ptXs   { padding-top: var(--space-xs) !important; }
  .t-md-ptSm   { padding-top: var(--space-sm) !important; }
  .t-md-ptMd   { padding-top: var(--space-md) !important; }
  .t-md-ptLg   { padding-top: var(--space-lg) !important; }
  .t-md-ptXl   { padding-top: var(--space-xl) !important; }
  .t-md-ptHg   { padding-top: var(--space-hg) !important; }
  .t-md-ptGt   { padding-top: var(--space-gt) !important; }

  .t-md-pb0    { padding-bottom: 0 !important; }
  .t-md-pbMi   { padding-bottom: var(--space-mi) !important; }
  .t-md-pbTn   { padding-bottom: var(--space-tn) !important; }
  .t-md-pbXs   { padding-bottom: var(--space-xs) !important; }
  .t-md-pbSm   { padding-bottom: var(--space-sm) !important; }
  .t-md-pbMd   { padding-bottom: var(--space-md) !important; }
  .t-md-pbLg   { padding-bottom: var(--space-lg) !important; }
  .t-md-pbXl   { padding-bottom: var(--space-xl) !important; }
  .t-md-pbHg   { padding-bottom: var(--space-hg) !important; }
  .t-md-pbGt   { padding-bottom: var(--space-gt) !important; }
}

@media (--viewport-lg) {
  .t-lg-ma0    { margin: 0 !important; }
  .t-lg-maMi   { margin: var(--space-mi) !important; }
  .t-lg-maTn   { margin: var(--space-tn) !important; }
  .t-lg-maXs   { margin: var(--space-xs) !important; }
  .t-lg-maSm   { margin: var(--space-sm) !important; }
  .t-lg-maMd   { margin: var(--space-md) !important; }
  .t-lg-maLg   { margin: var(--space-lg) !important; }
  .t-lg-maXl   { margin: var(--space-xl) !important; }
  .t-lg-maHg   { margin: var(--space-hg) !important; }
  .t-lg-maGt   { margin: var(--space-gt) !important; }

  .t-lg-mt0    { margin-top: 0 !important; }
  .t-lg-mtMi   { margin-top: var(--space-mi) !important; }
  .t-lg-mtTn   { margin-top: var(--space-tn) !important; }
  .t-lg-mtXs   { margin-top: var(--space-xs) !important; }
  .t-lg-mtSm   { margin-top: var(--space-sm) !important; }
  .t-lg-mtMd   { margin-top: var(--space-md) !important; }
  .t-lg-mtLg   { margin-top: var(--space-lg) !important; }
  .t-lg-mtXl   { margin-top: var(--space-xl) !important; }
  .t-lg-mtHg   { margin-top: var(--space-hg) !important; }
  .t-lg-mtGt   { margin-top: var(--space-gt) !important; }

  .t-lg-mb0    { margin-bottom: 0 !important; }
  .t-lg-mbMi   { margin-bottom: var(--space-mi) !important; }
  .t-lg-mbTn   { margin-bottom: var(--space-tn) !important; }
  .t-lg-mbXs   { margin-bottom: var(--space-xs) !important; }
  .t-lg-mbSm   { margin-bottom: var(--space-sm) !important; }
  .t-lg-mbMd   { margin-bottom: var(--space-md) !important; }
  .t-lg-mbLg   { margin-bottom: var(--space-lg) !important; }
  .t-lg-mbXl   { margin-bottom: var(--space-xl) !important; }
  .t-lg-mbHg   { margin-bottom: var(--space-hg) !important; }
  .t-lg-mbGt   { margin-bottom: var(--space-gt) !important; }

  .t-lg-pa0    { padding: 0 !important; }
  .t-lg-paMi   { padding: var(--space-mi) !important; }
  .t-lg-paTn   { padding: var(--space-tn) !important; }
  .t-lg-paXs   { padding: var(--space-xs) !important; }
  .t-lg-paSm   { padding: var(--space-sm) !important; }
  .t-lg-paMd   { padding: var(--space-md) !important; }
  .t-lg-paLg   { padding: var(--space-lg) !important; }
  .t-lg-paXl   { padding: var(--space-xl) !important; }
  .t-lg-paHg   { padding: var(--space-hg) !important; }
  .t-lg-paGt   { padding: var(--space-gt) !important; }

  .t-lg-pt0    { padding-top: 0 !important; }
  .t-lg-ptMi   { padding-top: var(--space-mi) !important; }
  .t-lg-ptTn   { padding-top: var(--space-tn) !important; }
  .t-lg-ptXs   { padding-top: var(--space-xs) !important; }
  .t-lg-ptSm   { padding-top: var(--space-sm) !important; }
  .t-lg-ptMd   { padding-top: var(--space-md) !important; }
  .t-lg-ptLg   { padding-top: var(--space-lg) !important; }
  .t-lg-ptXl   { padding-top: var(--space-xl) !important; }
  .t-lg-ptHg   { padding-top: var(--space-hg) !important; }
  .t-lg-ptGt   { padding-top: var(--space-gt) !important; }

  .t-lg-pb0    { padding-bottom: 0 !important; }
  .t-lg-pbMi   { padding-bottom: var(--space-mi) !important; }
  .t-lg-pbTn   { padding-bottom: var(--space-tn) !important; }
  .t-lg-pbXs   { padding-bottom: var(--space-xs) !important; }
  .t-lg-pbSm   { padding-bottom: var(--space-sm) !important; }
  .t-lg-pbMd   { padding-bottom: var(--space-md) !important; }
  .t-lg-pbLg   { padding-bottom: var(--space-lg) !important; }
  .t-lg-pbXl   { padding-bottom: var(--space-xl) !important; }
  .t-lg-pbHg   { padding-bottom: var(--space-hg) !important; }
  .t-lg-pbGt   { padding-bottom: var(--space-gt) !important; }
}