MelangeCSS Reference

Current Version: 1.0.0-RC5

Spacings ( Medium Width )†

Spacings provides a stepped scale for margins and padding, which form the basis of any grid-based design and power the underlyingn design system. Instead of allowing for inifinite, pixel-perfect spacings, the scale provided by this module gives you the ability to adjust elements along a few useful values that should cover 95% of your needs.

Properties

Floats

Note that modern browsers no longer require a cleafix hack. You can use display: flow-root to clear floats via the dfr class.

f*
f-l-m 
.f-l-m {
  float: left;
}
.f-l-m
The spice must flow! Without it, space travel is impossible.
f-r-m 
.f-r-m {
  float: right;
}
.f-r-m
The spice must flow! Without it, space travel is impossible.
f-n-m 
.f-n-m {
  float: none;
}
.f-n-m
The spice must flow! Without it, space travel is impossible.
Gap

Gap is space between grids, flexboxes, and columns.

gap*
Gap both
Steps
gap-0-m 
.gap-0-m {
  gap: 0;
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
gap-1-m 
.gap-1-m {
  gap: var(--sp-1);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
gap-2-m 
.gap-2-m {
  gap: var(--sp-2);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
gap-3-m 
.gap-3-m {
  gap: var(--sp-3);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
gap-4-m 
.gap-4-m {
  gap: var(--sp-4);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
gap-5-m 
.gap-5-m {
  gap: var(--sp-5);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
gap-6-m 
.gap-6-m {
  gap: var(--sp-6);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
gap-7-m 
.gap-7-m {
  gap: var(--sp-7);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
gap-8-m 
.gap-8-m {
  gap: var(--sp-8);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
row-gap*
Gap row
Steps
row-gap-0-m 
.row-gap-0-m {
  row-gap: 0;
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
row-gap-1-m 
.row-gap-1-m {
  row-gap: var(--sp-1);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
row-gap-2-m 
.row-gap-2-m {
  row-gap: var(--sp-2);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
row-gap-3-m 
.row-gap-3-m {
  row-gap: var(--sp-3);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
row-gap-4-m 
.row-gap-4-m {
  row-gap: var(--sp-4);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
row-gap-5-m 
.row-gap-5-m {
  row-gap: var(--sp-5);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
row-gap-6-m 
.row-gap-6-m {
  row-gap: var(--sp-6);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
row-gap-7-m 
.row-gap-7-m {
  row-gap: var(--sp-7);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
row-gap-8-m 
.row-gap-8-m {
  row-gap: var(--sp-8);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
col-gap*
Gap column
Steps
col-gap-0-m 
.col-gap-0-m {
  column-gap: 0;
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
col-gap-1-m 
.col-gap-1-m {
  column-gap: var(--sp-1);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
col-gap-2-m 
.col-gap-2-m {
  column-gap: var(--sp-2);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
col-gap-3-m 
.col-gap-3-m {
  column-gap: var(--sp-3);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
col-gap-4-m 
.col-gap-4-m {
  column-gap: var(--sp-4);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
col-gap-5-m 
.col-gap-5-m {
  column-gap: var(--sp-5);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
col-gap-6-m 
.col-gap-6-m {
  column-gap: var(--sp-6);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
col-gap-7-m 
.col-gap-7-m {
  column-gap: var(--sp-7);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
col-gap-8-m 
.col-gap-8-m {
  column-gap: var(--sp-8);
}
Top Left
Top Middle
Top Right
Middle Left
Middle Middle
Middle Right
Bottom Left
Bottom Middle
Bottom Right
Margin

Margin is space outside the box and can be controlled in all four directions, horizontally, vertically, or each individually

ma*
Margin all
Steps
ma-0-m 
.ma-0-m {
  margin: 0;
}
.ma-0-m
ma-1-m 
.ma-1-m {
  margin: var(--sp-1);
}
.ma-1-m
ma-2-m 
.ma-2-m {
  margin: var(--sp-2);
}
.ma-2-m
ma-3-m 
.ma-3-m {
  margin: var(--sp-3);
}
.ma-3-m
ma-4-m 
.ma-4-m {
  margin: var(--sp-4);
}
.ma-4-m
ma-5-m 
.ma-5-m {
  margin: var(--sp-5);
}
.ma-5-m
ma-6-m 
.ma-6-m {
  margin: var(--sp-6);
}
.ma-6-m
ma-7-m 
.ma-7-m {
  margin: var(--sp-7);
}
.ma-7-m
ma-8-m 
.ma-8-m {
  margin: var(--sp-8);
}
.ma-8-m
ma-auto-m 
.ma-auto-m {
  margin: auto;
}
.ma-auto-m
ml*
Margin left
Steps
ml-0-m 
.ml-0-m {
  margin-left: 0;
}
.ml-0-m
ml-1-m 
.ml-1-m {
  margin-left: var(--sp-1);
}
.ml-1-m
ml-2-m 
.ml-2-m {
  margin-left: var(--sp-2);
}
.ml-2-m
ml-3-m 
.ml-3-m {
  margin-left: var(--sp-3);
}
.ml-3-m
ml-4-m 
.ml-4-m {
  margin-left: var(--sp-4);
}
.ml-4-m
ml-5-m 
.ml-5-m {
  margin-left: var(--sp-5);
}
.ml-5-m
ml-6-m 
.ml-6-m {
  margin-left: var(--sp-6);
}
.ml-6-m
ml-7-m 
.ml-7-m {
  margin-left: var(--sp-7);
}
.ml-7-m
ml-8-m 
.ml-8-m {
  margin-left: var(--sp-8);
}
.ml-8-m
ml-auto-m 
.ml-auto-m {
  margin-left: auto;
}
.ml-auto-m
mr*
Margin right
Steps
mr-0-m 
.mr-0-m {
  margin-right: 0;
}
.mr-0-m
mr-1-m 
.mr-1-m {
  margin-right: var(--sp-1);
}
.mr-1-m
mr-2-m 
.mr-2-m {
  margin-right: var(--sp-2);
}
.mr-2-m
mr-3-m 
.mr-3-m {
  margin-right: var(--sp-3);
}
.mr-3-m
mr-4-m 
.mr-4-m {
  margin-right: var(--sp-4);
}
.mr-4-m
mr-5-m 
.mr-5-m {
  margin-right: var(--sp-5);
}
.mr-5-m
mr-6-m 
.mr-6-m {
  margin-right: var(--sp-6);
}
.mr-6-m
mr-7-m 
.mr-7-m {
  margin-right: var(--sp-7);
}
.mr-7-m
mr-8-m 
.mr-8-m {
  margin-right: var(--sp-8);
}
.mr-8-m
mr-auto-m 
.mr-auto-m {
  margin-right: auto;
}
.mr-auto-m
mt*
Margin top
Steps
mt-0-m 
.mt-0-m {
  margin-top: 0;
}
.mt-0-m
mt-1-m 
.mt-1-m {
  margin-top: var(--sp-1);
}
.mt-1-m
mt-2-m 
.mt-2-m {
  margin-top: var(--sp-2);
}
.mt-2-m
mt-3-m 
.mt-3-m {
  margin-top: var(--sp-3);
}
.mt-3-m
mt-4-m 
.mt-4-m {
  margin-top: var(--sp-4);
}
.mt-4-m
mt-5-m 
.mt-5-m {
  margin-top: var(--sp-5);
}
.mt-5-m
mt-6-m 
.mt-6-m {
  margin-top: var(--sp-6);
}
.mt-6-m
mt-7-m 
.mt-7-m {
  margin-top: var(--sp-7);
}
.mt-7-m
mt-8-m 
.mt-8-m {
  margin-top: var(--sp-8);
}
.mt-8-m
mt-auto-m 
.mt-auto-m {
  margin-top: auto;
}
.mt-auto-m
mb*
Margin bottom
Steps
mb-0-m 
.mb-0-m {
  margin-bottom: 0;
}
.mb-0-m
mb-1-m 
.mb-1-m {
  margin-bottom: var(--sp-1);
}
.mb-1-m
mb-2-m 
.mb-2-m {
  margin-bottom: var(--sp-2);
}
.mb-2-m
mb-3-m 
.mb-3-m {
  margin-bottom: var(--sp-3);
}
.mb-3-m
mb-4-m 
.mb-4-m {
  margin-bottom: var(--sp-4);
}
.mb-4-m
mb-5-m 
.mb-5-m {
  margin-bottom: var(--sp-5);
}
.mb-5-m
mb-6-m 
.mb-6-m {
  margin-bottom: var(--sp-6);
}
.mb-6-m
mb-7-m 
.mb-7-m {
  margin-bottom: var(--sp-7);
}
.mb-7-m
mb-8-m 
.mb-8-m {
  margin-bottom: var(--sp-8);
}
.mb-8-m
mb-auto-m 
.mb-auto-m {
  margin-bottom: auto;
}
.mb-auto-m
mh*
Margin horizontal
Steps
mh-0-m 
.mh-0-m {
  margin-left: 0;
  margin-right: 0;
}
.mh-0-m
mh-1-m 
.mh-1-m {
  margin-left: var(--sp-1);
  margin-right: var(--sp-1);
}
.mh-1-m
mh-2-m 
.mh-2-m {
  margin-left: var(--sp-2);
  margin-right: var(--sp-2);
}
.mh-2-m
mh-3-m 
.mh-3-m {
  margin-left: var(--sp-3);
  margin-right: var(--sp-3);
}
.mh-3-m
mh-4-m 
.mh-4-m {
  margin-left: var(--sp-4);
  margin-right: var(--sp-4);
}
.mh-4-m
mh-5-m 
.mh-5-m {
  margin-left: var(--sp-5);
  margin-right: var(--sp-5);
}
.mh-5-m
mh-6-m 
.mh-6-m {
  margin-left: var(--sp-6);
  margin-right: var(--sp-6);
}
.mh-6-m
mh-7-m 
.mh-7-m {
  margin-left: var(--sp-7);
  margin-right: var(--sp-7);
}
.mh-7-m
mh-8-m 
.mh-8-m {
  margin-left: var(--sp-8);
  margin-right: var(--sp-8);
}
.mh-8-m
mh-auto-m 
.mh-auto-m {
  margin-left: auto;
  margin-right: auto;
}
.mh-auto-m
mv*
Margin vertical
Steps
mv-0-m 
.mv-0-m {
  margin-top: 0;
  margin-bottom: 0;
}
.mv-0-m
mv-1-m 
.mv-1-m {
  margin-top: var(--sp-1);
  margin-bottom: var(--sp-1);
}
.mv-1-m
mv-2-m 
.mv-2-m {
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.mv-2-m
mv-3-m 
.mv-3-m {
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.mv-3-m
mv-4-m 
.mv-4-m {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.mv-4-m
mv-5-m 
.mv-5-m {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.mv-5-m
mv-6-m 
.mv-6-m {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-6);
}
.mv-6-m
mv-7-m 
.mv-7-m {
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-7);
}
.mv-7-m
mv-8-m 
.mv-8-m {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-8);
}
.mv-8-m
mv-auto-m 
.mv-auto-m {
  margin-top: auto;
  margin-bottom: auto;
}
.mv-auto-m
Padding

Padding is space internal to the box and can be controlled in all four directions, horizontally, vertically, or each individually

pa*
Padding all
Steps
pa-0-m 
.pa-0-m {
  padding: 0;
}
.pa-0-m
pa-1-m 
.pa-1-m {
  padding: var(--sp-1);
}
.pa-1-m
pa-2-m 
.pa-2-m {
  padding: var(--sp-2);
}
.pa-2-m
pa-3-m 
.pa-3-m {
  padding: var(--sp-3);
}
.pa-3-m
pa-4-m 
.pa-4-m {
  padding: var(--sp-4);
}
.pa-4-m
pa-5-m 
.pa-5-m {
  padding: var(--sp-5);
}
.pa-5-m
pa-6-m 
.pa-6-m {
  padding: var(--sp-6);
}
.pa-6-m
pa-7-m 
.pa-7-m {
  padding: var(--sp-7);
}
.pa-7-m
pa-8-m 
.pa-8-m {
  padding: var(--sp-8);
}
.pa-8-m
pl*
Padding left
Steps
pl-0-m 
.pl-0-m {
  padding-left: 0;
}
.pl-0-m
pl-1-m 
.pl-1-m {
  padding-left: var(--sp-1);
}
.pl-1-m
pl-2-m 
.pl-2-m {
  padding-left: var(--sp-2);
}
.pl-2-m
pl-3-m 
.pl-3-m {
  padding-left: var(--sp-3);
}
.pl-3-m
pl-4-m 
.pl-4-m {
  padding-left: var(--sp-4);
}
.pl-4-m
pl-5-m 
.pl-5-m {
  padding-left: var(--sp-5);
}
.pl-5-m
pl-6-m 
.pl-6-m {
  padding-left: var(--sp-6);
}
.pl-6-m
pl-7-m 
.pl-7-m {
  padding-left: var(--sp-7);
}
.pl-7-m
pl-8-m 
.pl-8-m {
  padding-left: var(--sp-8);
}
.pl-8-m
pr*
Padding right
Steps
pr-0-m 
.pr-0-m {
  padding-right: 0;
}
.pr-0-m
pr-1-m 
.pr-1-m {
  padding-right: var(--sp-1);
}
.pr-1-m
pr-2-m 
.pr-2-m {
  padding-right: var(--sp-2);
}
.pr-2-m
pr-3-m 
.pr-3-m {
  padding-right: var(--sp-3);
}
.pr-3-m
pr-4-m 
.pr-4-m {
  padding-right: var(--sp-4);
}
.pr-4-m
pr-5-m 
.pr-5-m {
  padding-right: var(--sp-5);
}
.pr-5-m
pr-6-m 
.pr-6-m {
  padding-right: var(--sp-6);
}
.pr-6-m
pr-7-m 
.pr-7-m {
  padding-right: var(--sp-7);
}
.pr-7-m
pr-8-m 
.pr-8-m {
  padding-right: var(--sp-8);
}
.pr-8-m
pt*
Padding top
Steps
pt-0-m 
.pt-0-m {
  padding-top: 0;
}
.pt-0-m
pt-1-m 
.pt-1-m {
  padding-top: var(--sp-1);
}
.pt-1-m
pt-2-m 
.pt-2-m {
  padding-top: var(--sp-2);
}
.pt-2-m
pt-3-m 
.pt-3-m {
  padding-top: var(--sp-3);
}
.pt-3-m
pt-4-m 
.pt-4-m {
  padding-top: var(--sp-4);
}
.pt-4-m
pt-5-m 
.pt-5-m {
  padding-top: var(--sp-5);
}
.pt-5-m
pt-6-m 
.pt-6-m {
  padding-top: var(--sp-6);
}
.pt-6-m
pt-7-m 
.pt-7-m {
  padding-top: var(--sp-7);
}
.pt-7-m
pt-8-m 
.pt-8-m {
  padding-top: var(--sp-8);
}
.pt-8-m
pb*
Padding bottom
Steps
pb-0-m 
.pb-0-m {
  padding-bottom: 0;
}
.pb-0-m
pb-1-m 
.pb-1-m {
  padding-bottom: var(--sp-1);
}
.pb-1-m
pb-2-m 
.pb-2-m {
  padding-bottom: var(--sp-2);
}
.pb-2-m
pb-3-m 
.pb-3-m {
  padding-bottom: var(--sp-3);
}
.pb-3-m
pb-4-m 
.pb-4-m {
  padding-bottom: var(--sp-4);
}
.pb-4-m
pb-5-m 
.pb-5-m {
  padding-bottom: var(--sp-5);
}
.pb-5-m
pb-6-m 
.pb-6-m {
  padding-bottom: var(--sp-6);
}
.pb-6-m
pb-7-m 
.pb-7-m {
  padding-bottom: var(--sp-7);
}
.pb-7-m
pb-8-m 
.pb-8-m {
  padding-bottom: var(--sp-8);
}
.pb-8-m
ph*
Padding horizontal
Steps
ph-0-m 
.ph-0-m {
  padding-left: 0;
  padding-right: 0;
}
.ph-0-m
ph-1-m 
.ph-1-m {
  padding-left: var(--sp-1);
  padding-right: var(--sp-1);
}
.ph-1-m
ph-2-m 
.ph-2-m {
  padding-left: var(--sp-2);
  padding-right: var(--sp-2);
}
.ph-2-m
ph-3-m 
.ph-3-m {
  padding-left: var(--sp-3);
  padding-right: var(--sp-3);
}
.ph-3-m
ph-4-m 
.ph-4-m {
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
}
.ph-4-m
ph-5-m 
.ph-5-m {
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}
.ph-5-m
ph-6-m 
.ph-6-m {
  padding-left: var(--sp-6);
  padding-right: var(--sp-6);
}
.ph-6-m
ph-7-m 
.ph-7-m {
  padding-left: var(--sp-7);
  padding-right: var(--sp-7);
}
.ph-7-m
ph-8-m 
.ph-8-m {
  padding-left: var(--sp-8);
  padding-right: var(--sp-8);
}
.ph-8-m
pv*
Padding vertical
Steps
pv-0-m 
.pv-0-m {
  padding-top: 0;
  padding-bottom: 0;
}
.pv-0-m
pv-1-m 
.pv-1-m {
  padding-top: var(--sp-1);
  padding-bottom: var(--sp-1);
}
.pv-1-m
pv-2-m 
.pv-2-m {
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}
.pv-2-m
pv-3-m 
.pv-3-m {
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}
.pv-3-m
pv-4-m 
.pv-4-m {
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}
.pv-4-m
pv-5-m 
.pv-5-m {
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
}
.pv-5-m
pv-6-m 
.pv-6-m {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}
.pv-6-m
pv-7-m 
.pv-7-m {
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-7);
}
.pv-7-m
pv-8-m 
.pv-8-m {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
}
.pv-8-m