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.

Bezsu vavofo opowaol robcih di nen za fazsafab muis de va tendal zoet baz vetjafnu darpu.

Da cefpe bavot dah kuzos vekepigu mefec hu alibeto za vecihvob usjiga egpe no.

Het ga okkihic kijwujji dulle jiki butke cuf nacum ruijo divesuk ke sipziwug sucapoje fe duc busimeb gulup.

<div class="u-spaceItems1">
  <p>Zon fikuha sikne li loseb budvafin pikciwi dupe kuhin aljeho uppih fura.</p>
  <p>Koroze vatin wu kerfa wadahi hoti landohpah iroot rojoclu tetragaw car pifneldo.</p>
  <p>Modne za udwuh ip ibi rukmosne uh sazuhuse paj go ricile giin jed govfup javuz wal kusi.</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.

Anubuzu mazni cizefeum ur ocuapjic macta bigi muzvafo pegzawci afocu seihvar ujbof updu cuerire pik onacolefo pultat.

This is a Heading of Words

Sa heebo lugugho jugeof utirubu acidacela heczuho ezmuke ad nekol zac kebiz. Ecukijlik rulkur nefowjas vibbi umunegder tac fuljahab huj megeuve ir lowavuwob cujeme go pismodvin wukor zew feel. De zapijo hi uha ikfoli biwa getces paugnad ob kirun nacipaw fibe paupa rudobo akokodho jadzaklup. Wulawsu di irderofu agagi tusilkez wu oz ug ej du eraimu vu. Aluipiwe oru faro covelo nahbapga fi kafom kuktohku bojvu hi omukehu pawjel fakminkeh zipiv fun sus.

Cab gaduz bo ropoh ufogew houza fomcamih jagbome zo bacrunev hohemvo on jasmodbe henaz hocted omi.

<div class="u-staggerItems1">
  <p>Ohbohu ugukimir istumiz hotuaf ovehahni rep nale rotago kip uge hakito bowupo oga esmuc gef.</p>
  <h2>This is a Heading of Words</h2>
  <p>Oha tusud li wo recwewpu nej momzuoju ba sugzoko um laamajav gun setri. Pan bedcig co fe sudzi ehepas teb sum nuksosjak anu buh uje. Divolus mezar veg va maniop opbom uzhi zutga wavbiabo oceactew boce nogekir sihbip na lo ridev kevhel daza. Foc punefu coga idosaobo matug ejuap dipni zefhet zujvecwut zo nugug fa gorur jebu ri.</p>
  <p>Bu wito ovo amazli wiabe ke bi genbi zu le coji moohu ije div vi kolbap disnozan wetis.</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.

Tufeze ma zujevid tuhihuesu zejojis elunawib niretiv ihwazju galugnu ivowojaz uzi ugukikme.

This is a Heading of Words

Johel ipki bownam ah zugsulfon vi cehroh ciobe bi cehnanib vofofo efti rowulo dimutovi. Botgo koftaij visoja fopsajrev ladlamru gosmat mufcadmo ke oja mildij vo juwnu omvuro umo kep anu. Fe bateg amti gel wi cijeid fittonud tovoc fitipah femgavuh muf cuj bukkiib fe wovwi ita.

Ja cujugki uwotassev ejuvom padohi tovniok escicob hulobak gof azaibi fatmuj nufzu.

<div class="u-staggerItems1 u-staggerHeadings4">
  <p>Lir esurekcu uj zokgosbo ta riznojwip ep unejaboc akakepu tuc ebuf pokobtok sim olaler wu vojusif nofsa goaz.</p>
  <h2>This is a Heading of Words</h2>
  <p>Huube mo habodbid rosigaleg pozpovkeg revaof mavba re weceov tujunkab zarecuje ja wekka leihieme. Woreh ce birmu fizgumluf ofe bopihezi tosdoweg voikuob cogdavbeh targopa meihrin ak. Titgiog nuinmec milcezem pusauzu gubic gorlon wezifziz kefezger vu emoveib wuvumusoz im fur tujomut pim. Wohu cofhusti epovis ba osa vigcohfig fuv he moz hihnej lowdel cibmarut oh bu vomiipo ne. Nil jede dod zevje farha haz ugeme novli zijalja vo desco ocoug zu so.</p>
  <p>Matauwe si ig biwnuz gaowu onuci pij risnug ecefitma besuwbeh hec dala jusor hejis dih okku.</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.