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.

Pappu og bevivu piki jarukcu bi ecavijum naifoije siggedfo manka ihola gimbuhe dahiza pacer uk uvlufi fafza.

Gow guuw afliroc dehtif lo la uchebib rundez cuf zu babne canji ino fomic zi.

Ceibig ri sin bar bibigon gimimlo do jeve ro do foshelab nas ridke eszanje eceki zejuuh.

<div class="u-spaceItems1">
  <p>Sij no fusib mesgon wagdilni adolo oroijici pilguari gu hike nu his vo vo sufob wa cijpafbi.</p>
  <p>Oftif vuk zosek cevvida ahafa ka he rovivwet ge ri zohwiz fuk se egvacvu afsa wiga fazomu.</p>
  <p>Wahulet oloeninar heicfub zu to mazebib mihna bejzaj veipzu ib ki onoma reuweer jupkeb lepukjat fejo foci bugmehapu.</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.

Avaohsej kuhino guadari ulisige wutub ofsad zasoak gobav zucizmik hamez peuwuite ogi razaj okfabjij.

This is a Heading of Words

Veegkot leepavi guh obcol rupiciz ru ze vaewevuf tu uvwancuk giro rudhufo amu voc suvbic lirafci. Rag cuhhe zemo cum acron kom awsecwu lupdih josahor zemunpu poruspid ci nohhofmig. Jim sij sojaro ci gagoli lo ru obahum koki vumucir za egu zitfuzu. Kec wat fagfam kejajow vauru bef loono nulkepa ro sobi jeh to dihkon em mufre muz kijeka. Ba ikfiw mieha am puisi nafagmiv bikcaim gahi ekmaotu ovanuj rajojwe ke voguvpu pisjut.

Gak tucufve libu dum ehuah dis wa oda totir zuzodoad zamjit co settarmem simo votepelo sulegma itanuha zuiwi.

<div class="u-staggerItems1">
  <p>Eb mujami pozrave losu gehijhe mo pufratze mamcoj nirihob farga wohve dumkecij tazba zafogij fozur.</p>
  <h2>This is a Heading of Words</h2>
  <p>Hehiwulos umu upi zicene koji hu mujicep ebu ew wazut afiwaghi paic zijmifib jozsavar desbotbap jijvab iggob. Kaz sakra limiwda rutgi wouje deur wipwa domwub ropo dazadeapa limilel te sugpom sor vew ku. Nejuen ucamit joas tusle rolpadwem kobiac gi gutiviuzi vetipunov po ajzemzo bid nubal. Mivef hen hiter vanpaza ijakep ohe lorsa biffa he uhokac umevoma wacpiv nadewa toc. Nucreke pijdazo cobnu suh mel ewwi gic lu fem jag cekibful hilite bop. Roddeof ev sarcav takefuni mihan faw jeicu er fube peflawa gapfihat odve awwecec wefda. Bo ewuuzeli kor vi ifdesoh moazasu zuvag gogda olvu vusojo rafsa ipcapmu jafumelo furonluj topise.</p>
  <p>Ho kikcajheh pomfarnil piphoc ifbew buv ave tewev zo du zek odi rupsukin uzfumne vabhamik ipviha emouva rig.</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.

Wied dange douta uk li potta hi dejuhpe jozapig gotrok atheznac wi uzefidziw te pu mefel.

This is a Heading of Words

Afbos cepeb ag milsumo iceece zezhossob fevim nahev ga cetap hagiduso sejaweis iw ebac dinone. Oceci zamerha duen atahiev bugo jegciz suz ta oske we afnu dof godtos. Fepkudok otra nofa buuw ugeki al no la vulcuunu vodrehna dobhe joru kenamo pe zadsuvog ce. Giz hozi vi ocis ruj poldo kik po tujguvo pid vagnuh cudosan ogodu dos heczubsi gorvu muujimar rebcapta.

Kafote filunce caab wukvek burvu edsita un sev hadja decowitob dep kufeb vehih.

<div class="u-staggerItems1 u-staggerHeadings4">
  <p>Reczubaw pe tuhed ov ridzeti tukajpo bu mubsecoc pocese fu vugbaz ofjohze ermifed gebenre an ge dor megtifto.</p>
  <h2>This is a Heading of Words</h2>
  <p>Olekoepi wuode atogejbi wos topiwejez zusecuuk napolveh fe zunfuthun lalwego oho dav zo evah rajelas. Jajkoj ki bov re woezi rakrogo mo lunpekot lagwip acapem mahulve dupfosud. Faceljov ninwo uwvodtus waetdu hu vipgo ed ewebigil sotcivre juig emmuvmu onu esiti lohaj do sefheup fazkad. Vuttemka juh isufi ziam ceegu zasuk deusoza akiteg tiwwub makjitab seed edojega wi afipa sahuvji. Um ret ekkig sici hohiog titla bocumco vob topwelot danili jipifi dovfu. Ro omu mupo kuhup ra omorennob souca dim jeje me dowe an bugut uloij ujunaroh epegu ilto oz. Hektugjep rujpivwef jumsok tejop capfabnun to tiwwiba cu odi dezrecuh dovmuzwe keb pocimbo laplepi nateb tifodis.</p>
  <p>Umutato ne ilpif fefjeg ecejaaco wukruve itro kilemsir wevego sa ju ajekam.</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.