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.

Vuwahfaz di jifgi lufnaruf toen kivdobogi sulrut rebpoba nu wehmo uvuomo vavi lahajvu.

Gahfaeli ja witzef fopo marasjor fov rejef povot tigecbug oceesu sudaugu pe.

Fojige duteop nimpirep no upzom ehuva guklaplar sedvo wegatiin vi tutva cuakemo.

<div class="u-spaceItems1">
          <p>Vuwahfaz di jifgi lufnaruf toen kivdobogi sulrut rebpoba nu wehmo uvuomo vavi lahajvu.</p>
          <p>Gahfaeli ja witzef fopo marasjor fov rejef povot tigecbug oceesu sudaugu pe.</p>
          <p>Fojige duteop nimpirep no upzom ehuva guklaplar sedvo wegatiin vi tutva cuakemo.</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.

Jodas bazlew fec puzov mi awo ofovohno caah awikafig fowep bulbi sof mafri buju.

This is a Heading of Words

Vil sukuhti po fa fagcubig jehep rov ru nuunsi nuj loanaahe cotova. Dovkeraj vuwbozo copa de vutoito ceatepi am ujuda evu dowbag habkod gohod lom etto ajonuv lacoz. Pu gubos botitbo lo ige wu lohju zocob donuw tusojtav ekocuru pa ovwef kuwje bo vakze.

Zawre mehek lodmupak age wuw kek caos ok lesug jauvele ok be isagadpuh mu noz zarid zuhdioco.

<div class="u-staggerItems1">
        <p>Jodas bazlew fec puzov mi awo ofovohno caah awikafig fowep bulbi sof mafri buju.</p>
        <h2>This is a Heading of Words</h2>
        <p>Vil sukuhti po fa fagcubig jehep rov ru nuunsi nuj loanaahe cotova. Dovkeraj vuwbozo copa de vutoito ceatepi am ujuda evu dowbag habkod gohod lom etto ajonuv lacoz. Pu gubos botitbo lo ige wu lohju zocob donuw tusojtav ekocuru pa ovwef kuwje bo vakze.</p>
        <p>Zawre mehek lodmupak age wuw kek caos ok lesug jauvele ok be isagadpuh mu noz zarid zuhdioco.</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.

Etulorfi bomhaf remazas hitsu ketleuso dupve kecacdo okowi owudedafo nokfofuh safpejoj uwebu joh wuoka vifig.

This is a Heading of Words

Uraag rogtogem azefeb helkig hitzo hujemsub lunju lutkigip eso ra vo ho riog. Nizvaz ju nidbu irasovgaz alo jikabi hobe jilep go po lemnuc vetbasjuw jion. Timugi kijokhij tisanu votenzij fosre wa vol garki uja deziwira jusi kosuk cinipeg hekufapu sufupa. Du zaz hun buv tigobnuj hewamru dejepnal seb ug uwpupas ow kuj. Pum soknuili covirosi gibesub mazukgel opcu lum zob reb sirum vup ikuna at ki mawlirli tu.

Bew tij wakor pib cidap wipowvin rumcip kapwuhgot pa tu da jo jagimiban pemwacwa vowahdo kokuvdat.

<div class="u-staggerItems1 u-staggerHeadings4">
        <p>Etulorfi bomhaf remazas hitsu ketleuso dupve kecacdo okowi owudedafo nokfofuh safpejoj uwebu joh wuoka vifig.</p>
        <h2>This is a Heading of Words</h2>
        <p>Uraag rogtogem azefeb helkig hitzo hujemsub lunju lutkigip eso ra vo ho riog. Nizvaz ju nidbu irasovgaz alo jikabi hobe jilep go po lemnuc vetbasjuw jion. Timugi kijokhij tisanu votenzij fosre wa vol garki uja deziwira jusi kosuk cinipeg hekufapu sufupa. Du zaz hun buv tigobnuj hewamru dejepnal seb ug uwpupas ow kuj. Pum soknuili covirosi gibesub mazukgel opcu lum zob reb sirum vup ikuna at ki mawlirli tu.</p>
        <p>Bew tij wakor pib cidap wipowvin rumcip kapwuhgot pa tu da jo jagimiban pemwacwa vowahdo kokuvdat.</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.