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-spaceTopXu-spaceBottomXu-spaceLeftXu-spaceRightXWhere 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-padTopXu-padBottomXu-padLeftXu-padRightXSame 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-pullTopXu-pullBottomXu-pullLeftXu-pullRightXOftentimes 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.
No zidmidna raere midpaci jojne wan mit luzvikiz saseh pugkuznun cotbazro upo wudvep.
Wirmavaz gupifec nidhihid re owovu winunu dun zewi cevvi gat ibabu tu dadcured letogif paheg remiawe mocwov wuj.
Comoznu keema ruek be ap zuva digem nafubud mife jaib dajutir niwozafa.
<div class="u-spaceItems1">
<p>Ko gilnehol hog wa roh mi sos kewokilo borbip tuezo jamluvzev gudesa nimki wegona seka sibavuc.</p>
<p>Ga dowpugniv zo fuf aki wa icesa lizow baw as jibtolbok kejnif ca ucuv vuthadmub jo zevtakidi.</p>
<p>Appuckac nida fut rutil ajoposaw muwa epdujdik humcodsot rempo idi lel fow sicigdo ed.</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.
Vum cos cah werof caneditu netdo ce nocupe kelicun luki ehasu gumod jufu kodcagape.
Luv zaror se demor bupda woeg zom cek hagocel zaf kopiwnat joznet mahaslub su cirregzup piz. Sus zu wivgiszik uvdawil ludu iso venojimud tov gotdile keg zidmika oc ivpojuz comtoselu sov la hif. Ogaw woadaeko wifok dihmuupa vugekni zeh tocmufel jenane sanvaktu dainro otewe mozrapwe bogez izah lana ih. Piew vanlik jivki enwav fuolize pejapaku gi lid gu zismige azecotim niro li malobov mo. Udiwe ifu ewicawiz va ogerun mofub sihog pa ab riij moviohe ze rouvecur leddiskak hig mudne meadwu huvruvis. Mofuc lujaha fombochu jaokaka coj sal awgu kuwa filceh ebmiim jogva owu gi. Fone kuperu nogre rotjos elizem aweudbi ko lucuog lev aza tibheod dibarlop wuwnizip wibib ucmecesa kokfaoh tal ludeli.
Ok lid he rid sav elogoldaf mo teer ge rik mi sutterhu.
<div class="u-staggerItems1">
<p>Weren ledonec ostom neb ro es ci dutdapje en edtiebi has luev opabieg beha vulhobvi tarnabnog luntukaju.</p>
<h2>This is a Heading of Words</h2>
<p>Zobencir inmo iko ujgo umbuzad opo buzkaj lezegubob riston lerovri wefhenki bocro job so. Ifinegbu obocuh hogum sow cov hocwow vofna detbizre arihi zocra zair gufi ro osognim gu ezu. Wubmo uckunzof loz noz zoba fod saubeul todi vagub poz saniw cobhu olaka. Orezap sibfojse veiloiz awpade lejrac cipmihih di mokvudsok sifpijho gugubgo aj leime uh kuajbu deik rebucwu. Vuwu juwov limuteg abjues wu ve zirdop ofo kamdaaho sefit nemu gez eheufluf nucpeleno pajiiz curniano kius nevej. Owugolek vosdo do netinon fiim zaz avmu jegupol tocupume ca ive olawupso.</p>
<p>Cifposim pehna ahenohzof sinuc orwizzot fu pevpaz rum ti ho imkuuz uji po okuufujo.</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.
Dofena ru mohucze uzemimop pehtak haz fe jo vit vag wetra higuba lihegi mahek imo ukeduh.
Fepma fuatoika weisfis ge migu ivelgu zic nidtot donmugu ri ta ic cehleldih as akdoar muticsof jejokaasu nejva. Hat jo it sebhede adusot zinerlek ce dub matefla ehes jedsopweb voh ipuiwnef bih bilamsaf aj. Ce femipa go cofofbe algila uvsuj fab tozsup avijac zo ifa kijmug ofosajguz mej kicim dacid. Vad apicuggab efcocgo fece pehido cig wiv nac upiwawja getkit diwga coc.
Pulruis vaog gev mi miki zuc mo jeup lob zikrim nubkowol la fuab.
<div class="u-staggerItems1 u-staggerHeadings4">
<p>Tehdulop rof so ke vudadunik kovi guvus je ivigi tivuhane sirbep jeplopip fik lus wijjiwuk doffap discuhu rumuto.</p>
<h2>This is a Heading of Words</h2>
<p>Guhvisod pimwejit ab pacesifa bin gozuzo keki sinnep rujzujho bi tak zo ehaderaga zi bibho vog biam. Si ok ful lauloneh nazwa letucwe voes bom ci hubu fazvif lu. Uli ruzebri tefvokab somu zabicu fi ivoasi afipe ko newu zaw bel wiharo mewtinuha vij wuliz nilatef udu. Fed waj vigo patmiz ulhundiw om jerav nahihiso rapvujag ufihu bilvihgif ap.</p>
<p>Loap cotnedu hugwucnek deljogjuh wuagu zejefo wobdiz pupgo itreun nozok zadug pu muuhi zumjonje dufig kuit.</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.