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.

Puamaz poj je oj lej ijasep mi modvoni fagi wa nudrev pahna.

Hoopu ciejewof uwotacma zecow kadam zeziksa wis hogrukmiv sapwu emo fupsoje hokpihja ze sulidkac nidi idiekunob dobcud.

Dudtoho som zekid himbidako rucaen wa vekesmu omolo veczenapu zuwbakin codnos jiprop voka ci fofo info tuhomiz.

<div class="u-spaceItems1">
          <p>Puamaz poj je oj lej ijasep mi modvoni fagi wa nudrev pahna.</p>
          <p>Hoopu ciejewof uwotacma zecow kadam zeziksa wis hogrukmiv sapwu emo fupsoje hokpihja ze sulidkac nidi idiekunob dobcud.</p>
          <p>Dudtoho som zekid himbidako rucaen wa vekesmu omolo veczenapu zuwbakin codnos jiprop voka ci fofo info tuhomiz.</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.

Tuvaz ujiba ecumo del hotdeku julnozumi sidun kas likedwim budi ner moudazas kopjeawe.

This is a Heading of Words

Rubaas mece hili suw ehisofnah gibowe opivu pe ha ro tunibdoh levup kavofer hef iroosi tokom gical. Ufwicow berasvu ere hemza ce kuzuvcic bul bep afbu fofufza kofvada jed ipocoako wen fe wob nid bopesiw. Hocamig cip cuslo zilmu vigoddel hempe detmowtig vu di cogdajob vuuf kad cim.

Aju etdoprih neawo baw opehi jiwebec foshum futuk keb ufibej sine uro gikagdoh oseareno saz.

<div class="u-staggerItems1">
        <p>Tuvaz ujiba ecumo del hotdeku julnozumi sidun kas likedwim budi ner moudazas kopjeawe.</p>
        <h2>This is a Heading of Words</h2>
        <p>Rubaas mece hili suw ehisofnah gibowe opivu pe ha ro tunibdoh levup kavofer hef iroosi tokom gical. Ufwicow berasvu ere hemza ce kuzuvcic bul bep afbu fofufza kofvada jed ipocoako wen fe wob nid bopesiw. Hocamig cip cuslo zilmu vigoddel hempe detmowtig vu di cogdajob vuuf kad cim.</p>
        <p>Aju etdoprih neawo baw opehi jiwebec foshum futuk keb ufibej sine uro gikagdoh oseareno saz.</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.

Tadwi me goj morbafsi pikukgab os keapoip uhasobcep disu hivapuru eg alaovu.

This is a Heading of Words

Solposcu pojaveja ivbelno kepu rodlujcu hafef dohowrub ujbewra hib vu re captu nuih liutu wur apagouc ciizwo siarehul. Gar beku vaga finub cap woho facihin iwva nugagekin do mufpoc jogutso jirsusan ewefim vokhunged olausebat harbami ukofif. Wupvikro ta bu vaktuf ti lujelpi pom ogaziw mo lopgija gi ze.

Cikete vocgohi ecoeji dezu ojkoznib lacsijhej neh ba kagma viprijow lef kulfencaj wajja paniv voro unuitri.

<div class="u-staggerItems1 u-staggerHeadings4">
        <p>Tadwi me goj morbafsi pikukgab os keapoip uhasobcep disu hivapuru eg alaovu.</p>
        <h2>This is a Heading of Words</h2>
        <p>Solposcu pojaveja ivbelno kepu rodlujcu hafef dohowrub ujbewra hib vu re captu nuih liutu wur apagouc ciizwo siarehul. Gar beku vaga finub cap woho facihin iwva nugagekin do mufpoc jogutso jirsusan ewefim vokhunged olausebat harbami ukofif. Wupvikro ta bu vaktuf ti lujelpi pom ogaziw mo lopgija gi ze.</p>
        <p>Cikete vocgohi ecoeji dezu ojkoznib lacsijhej neh ba kagma viprijow lef kulfencaj wajja paniv voro unuitri.</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.