Space

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

Space Around

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.

Pad Inside

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

Pull

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

Rhythm: Exact

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.

Pifuharu suduzzo towoj ebi ela fapbirnis civfa la ufenisib micacnow hugdec kaervul jamun miasenu hucu le dehkuvcuj.

Obi razre da hi sambo ocielaka fuhcaga imi pinurdet judo roteha sokmulru.

Tip neubdav neke be pek sejpoeve pumublif zaru dendizlor tav bomlo luroc zu koz wid fur sicuom.

<div class="u-spaceItems1">
          <p>Pifuharu suduzzo towoj ebi ela fapbirnis civfa la ufenisib micacnow hugdec kaervul jamun miasenu hucu le dehkuvcuj.</p>
          <p>Obi razre da hi sambo ocielaka fuhcaga imi pinurdet judo roteha sokmulru.</p>
          <p>Tip neubdav neke be pek sejpoeve pumublif zaru dendizlor tav bomlo luroc zu koz wid fur sicuom.</p>
      </div>

Rhythm: Relative

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.

Ezholo vavjoben ho lin jajal lunbok wos ir le igiteun sarawis tudud zokibjuz ovibor licivmi.

This is a Heading of Words

Urogli beesjic adu ves la eca iskuzik ledag besude je icutir rorabuc pufje zul rihhif tajcoji mu atadowfeb. Mutot vokniru itomomuw hekeke jazamnam mi his homofi nanruh ri avuhu om mihebev. Raec wo tuaboeb mu ogkivuc misiv dezeg ilfapwud idilo dejejocu rage biw zuuffam gobopip wuswir cik metgi fu.

Wid lupe newa nav enjughah kuwulit ifuhalug weldiliz ubegoeru jadfis wuboz cohavip.

<div class="u-staggerItems1">
        <p>Ezholo vavjoben ho lin jajal lunbok wos ir le igiteun sarawis tudud zokibjuz ovibor licivmi.</p>
        <h2>This is a Heading of Words</h2>
        <p>Urogli beesjic adu ves la eca iskuzik ledag besude je icutir rorabuc pufje zul rihhif tajcoji mu atadowfeb. Mutot vokniru itomomuw hekeke jazamnam mi his homofi nanruh ri avuhu om mihebev. Raec wo tuaboeb mu ogkivuc misiv dezeg ilfapwud idilo dejejocu rage biw zuuffam gobopip wuswir cik metgi fu.</p>
        <p>Wid lupe newa nav enjughah kuwulit ifuhalug weldiliz ubegoeru jadfis wuboz cohavip.</p>
      </div>

Rhythm: Relative Headings

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.

Keazu sin zekuda bunigpo vuro hivgi ik cofa co huz emotah mibu wobrifo.

This is a Heading of Words

Ki sa jotpo doboc weafa un lef vauzmuc mobaste wiblam cujicge vapasa edsi habi jadarit. Mupi do wu ba hurru aho eciegeut ve wool hukjepug gutwatbes mawuc igojaz og heh bebpoh. Bij os cenag wejza zahfol ragule tedota zipu nos mu tokvunfo detecu tuvko uvedo zem muti ji uwawefal. Tiva kacuf sutzu eb hug hieha mupur zenki jomafeni ojuvin ludpu haduzpe gerkugkap ejulohe mupu ju. Gu uvoku peokugeh sujigim ahukas sa pakoru ad kuner mivuzluz ti nofbat umvatme. Uw ci ituif no bizo lidti net ze mo kof kahe ukohez mik.

Maabe wopkefke ceek hahi zazizke cubib wokigu mapoiso ofna tuvbejdo bet pejib fonilbod maluz dojmi hazukgo.

<div class="u-staggerItems1 u-staggerHeadings4">
        <p>Keazu sin zekuda bunigpo vuro hivgi ik cofa co huz emotah mibu wobrifo.</p>
        <h2>This is a Heading of Words</h2>
        <p>Ki sa jotpo doboc weafa un lef vauzmuc mobaste wiblam cujicge vapasa edsi habi jadarit. Mupi do wu ba hurru aho eciegeut ve wool hukjepug gutwatbes mawuc igojaz og heh bebpoh. Bij os cenag wejza zahfol ragule tedota zipu nos mu tokvunfo detecu tuvko uvedo zem muti ji uwawefal. Tiva kacuf sutzu eb hug hieha mupur zenki jomafeni ojuvin ludpu haduzpe gerkugkap ejulohe mupu ju. Gu uvoku peokugeh sujigim ahukas sa pakoru ad kuner mivuzluz ti nofbat umvatme. Uw ci ituif no bizo lidti net ze mo kof kahe ukohez mik.</p>
        <p>Maabe wopkefke ceek hahi zazizke cubib wokigu mapoiso ofna tuvbejdo bet pejib fonilbod maluz dojmi hazukgo.</p>
      </div>

Reset

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.