Space

TODO: show examples once there are container and border patterns.

Utilities for adding space around (outside) an element, using values from our modular scale to promote harmony in compositions:

  • u-spaceX - Adds space to all dimensions.
  • u-spaceEndsX - Adds space to top and bottom.
  • u-spaceSidesX - Adds space to left and right.
  • u-spaceTopX
  • u-spaceBottomX
  • u-spaceLeftX
  • u-spaceRightX

Where X is replaced with the desired modular scale step. For negative steps, use a leading zero (01 instead of -1). Omit X to use the base (0) step.

If you need to reset margins to auto check out our flex expand utilities.

Same as space utilities, but for adding whitespace within an element.

  • u-padX - Adds padding to all dimensions.
  • u-padEndsX - Adds padding to top and bottom.
  • u-padSidesX - Adds padding to left and right.
  • u-padTopX
  • u-padBottomX
  • u-padLeftX
  • u-padRightX

Same syntax, but applies negative margin. Useful for counteracting whitespace in parent elements or applying visual adjustments to non-rectangles.

  • u-pullX - Pulls element in all directions.
  • u-pullEndsX - Pulls element from top and bottom.
  • u-pullSidesX - Pulls element from left and right.
  • u-pullTopX
  • u-pullBottomX
  • u-pullLeftX
  • u-pullRightX

Oftentimes you'll want children of a certain element to space themselves with consistent rhythm. The u-spaceItems utility accomplishes this by adding space between adjacent children. It supports the same modular scale values as the other utilities.

Zuliwo cabaan iduwafgi ni keniode dod sohavab picaut cehdo ca lunzendo jiror we nargo.

Mi liv muz mi viduike zu fig coze jecuz ho pejepi maoropew kawtatika penzak wazanpil limrencal hew.

Lasorva ji kab vawpip zoveoki nep teg jickubo jah nebe obezof hog.

<div class="u-spaceItems1">
  <p>Koc cugnamo larpalwev mova umekanu gi nab newfoguc pawna ninliwe onatiftaf duf pivcapar.</p>
  <p>Guk fud mafbaze pe mebra mubo ulepeiz nariw pahov enu ku zim neacutid odnewa ruricimu.</p>
  <p>Sisipa tarro lehec ve wufa hi risohum nuasuba ca nuwbe cijenbi jotfi pa taw.</p>
</div>

While u-spaceItems is helpful, it can struggle with prose content where elements of varying size and hierarchy (such as headings and paragraphs) may appear too close together. u-staggerItems accomplishes the same thing, but bases the adjacent spacing on modular scale values relative to the items themselves.

TL;DR: Larger items will have more preceding space than smaller ones.

Tehrusize tajdofud tebom agwo faj izudefi jofukib ohbizmi pu baajihid jezzawjer tihkiwi oboohe zuiji do betkizogo walebut.

This is a Heading of Words

Ihu zo toz wivu lir nowofnu adli ucisu uwiwab sib wodo fenniw budopal unuohina. Ti kirukep rot to uba pedipber fegkilkov acu ido nathi caw githeine uti pughecoj. Upeehda rom wa ivem erejeina pechug na noohhe ewikoco eki wepuj maubevo putuzsek.

Movreg oso cegbi konub fo tujem bi waffazho kunin an rafagese ke pazet alpu zerna urtij mozlu wi.

<div class="u-staggerItems1">
  <p>Uveiswi fis la omfusi nilsubib vilre bizesfus zikef nif nuol piso rale voar.</p>
  <h2>This is a Heading of Words</h2>
  <p>Za dos ubpeze bubfu fanguzaki oki fu vornavgac kencah lekdo si wi. Woemepa tohkewolu lop mag miv sazzi bufseve duasu hin ov dogoze di zufgob dantizon tiif lum gaw pemepajo. Ducon wumzihna dor navpu mu wu co zi re sumosa esri mujobowip er. Ebbe atfawfi anineepo tata buwabi ga ocu hoekesiw vofoj uge sodeez hetejwub hupuwifuw poke ca larizmop.</p>
  <p>Sogwa ulso bonefjo ballurmiw fonefa zuwupwuz icu juihonuw arewuto buljolep evumavap alno ut ciknin visobged hel.</p>
</div>

Sometimes even the u-staggerItems* utilities don't quite get the contrast between sections desired. Use u-staggerHeadings to further differentiate headings from their preceding content.

Ledjapude lulezo ti pajrepban mezfofo fialapev mom iru na keuhu be howagvoz aj kag nonwichi.

This is a Heading of Words

Pevsa cawazhab dop katzuvi cu usub risazli zacigime uha rajifcem ha koduwre wedroedu bocgobtoh kuzhec. Kur le bomuas anperow pav dobopli erovaagu irbowwac rejoawo akiuj tih ewedubit kum jizar sakut wulewap bu. Urhulug iluefi sagoz ku uvocewuge gociztuv awme zavroaza tisbip wa niuro bovto reokjut gizamede videk unocora. Jeleku zifuzvo ab ega rog cuhgi kepocam hejpor arevacvi sav jel fiffemfef tocadzo weuwo fagpo. Tek jowlecjit derwoeha oh hip ga ronugoki eb zojidi pa za olakevek hi nov tuj surluc. Pazub natmehdiv ohhepag zuw zevva wimunciw tunu cohhibac tezrak boltentu luf asbuz za vonri daroz no umraudu fus.

Liwumi gigbewo ofu sa tuod riwucage cuigpa anba saduhu tuwe oveupine cif wesbo lenowad kaboped oki.

<div class="u-staggerItems1 u-staggerHeadings4">
  <p>Nin divusuf ru biebtob caverap alvezfil moc fufte fof raahuci nizbewab zu rumotko caihovu.</p>
  <h2>This is a Heading of Words</h2>
  <p>Nudepa ci obede mi ja empotko mi jampi opeb age poleg panital nikzaba lumguw hu. Ab ku zev seludij fa narubaj zeuviked tiz suvhof tuhev oramegow su vajibovu mor mozhut. Gisup oju ig weze upiila uhu fuhaj lodauj focler lij ivaje jabi wabonic sithasnoh doergur ifa piburaw hesil.</p>
  <p>Comato rucdeluh peloblu zev ohvoli widu uhfok rogcope ojweb uje ukifu tez duh sib ma likozohe fo.</p>
</div>

You can remove space and padding entirely from an element by using the u-despace and u-depad utilities. These support the same directional variations as the other space utilities, for example u-despaceEnds or u-depadLeft.