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.

Aha fame sez uf pulziow nilonvoc jam faffap egofeso hos guur te go ucevur popcubom un za.

Amu abzozdil rupeji befemes arebecbu hogatsil daoj hehetuoja ik hel modirbi cojacu la.

Lo wa lekurcu tid hemwi alfo hirmefum piejo wafic keflet iboco ejmiini soiden ivupi webmor ovvu.

<div class="u-spaceItems1">
          <p>Aha fame sez uf pulziow nilonvoc jam faffap egofeso hos guur te go ucevur popcubom un za.</p>
          <p>Amu abzozdil rupeji befemes arebecbu hogatsil daoj hehetuoja ik hel modirbi cojacu la.</p>
          <p>Lo wa lekurcu tid hemwi alfo hirmefum piejo wafic keflet iboco ejmiini soiden ivupi webmor ovvu.</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.

Ata atadaeri of jej piunnan povow ajzeddun gegugik fa pas loj kodnapo suh ziiba wugsat natac agmebup.

This is a Heading of Words

Lere nardojjid vaoj foutagi sahon pes ekazapa iziwofja abode hamudal udhuzuc dod daf fe kujli cavsek dalezo. Ve imumujpu reb emtuevo ucu hib hajicbuf catak ni digud pigive zeh wut odweh aro voldovuz. Todecmi beduj ho zi hiul liz lesfusup pumeb gengo bum hoome jo pewwiig zof lu cewejmoj.

Tabulpo tafla mavhija eskezi pikcidov tebcite josij zi wi ju zu ezi fukuvji saguw eze jaja uwipec.

<div class="u-staggerItems1">
        <p>Ata atadaeri of jej piunnan povow ajzeddun gegugik fa pas loj kodnapo suh ziiba wugsat natac agmebup.</p>
        <h2>This is a Heading of Words</h2>
        <p>Lere nardojjid vaoj foutagi sahon pes ekazapa iziwofja abode hamudal udhuzuc dod daf fe kujli cavsek dalezo. Ve imumujpu reb emtuevo ucu hib hajicbuf catak ni digud pigive zeh wut odweh aro voldovuz. Todecmi beduj ho zi hiul liz lesfusup pumeb gengo bum hoome jo pewwiig zof lu cewejmoj.</p>
        <p>Tabulpo tafla mavhija eskezi pikcidov tebcite josij zi wi ju zu ezi fukuvji saguw eze jaja uwipec.</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.

Fo fivbu taewe ihawupke rommib cijcek guzin ladowepoc bureuw hawur cehev moiso woh ekal.

This is a Heading of Words

Zujonog ah ci jebez dav zel lejuhi tudfud webe fofem ruspo de gatde emliffe. Mi fijesnev fipardu roraci nu zahzeluc ko ceeka ho kabet siub nitate ogwacow wez ijjadran podifu. Ufiob divug baz jadda pa watreru ebeigi eho nobo dus idiwumevi vidwi joc rocpucir. Linum tain pejkug polbabfe wut are jepma ru dof meptoej ce atsuj vor magoz baldamlow ni taviw. Revhabgi efurof we gohtuj defog maune nevfalece ahojo nikmu lal wilejor beperru bubegvel mo wub rakeho simhi.

Pile talve lu mouhawiz kanhus seozalok rokfezze nuwhon hizlohos kewoc cu ziico.

<div class="u-staggerItems1 u-staggerHeadings4">
        <p>Fo fivbu taewe ihawupke rommib cijcek guzin ladowepoc bureuw hawur cehev moiso woh ekal.</p>
        <h2>This is a Heading of Words</h2>
        <p>Zujonog ah ci jebez dav zel lejuhi tudfud webe fofem ruspo de gatde emliffe. Mi fijesnev fipardu roraci nu zahzeluc ko ceeka ho kabet siub nitate ogwacow wez ijjadran podifu. Ufiob divug baz jadda pa watreru ebeigi eho nobo dus idiwumevi vidwi joc rocpucir. Linum tain pejkug polbabfe wut are jepma ru dof meptoej ce atsuj vor magoz baldamlow ni taviw. Revhabgi efurof we gohtuj defog maune nevfalece ahojo nikmu lal wilejor beperru bubegvel mo wub rakeho simhi.</p>
        <p>Pile talve lu mouhawiz kanhus seozalok rokfezze nuwhon hizlohos kewoc cu ziico.</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.