Tomrum
Tomrum, det vill säga spacing, används för att definiera utrymmet mellan två vertikala objekt i layouten.
Om tomrum
Alla tomrumsklasser har sina egna responsiva klasser. Till exempel betyder c-space--s md:c-space--m lg:c-space--xl att:
- c-space--s är standard
- md:c-space--m är på surfplatta och uppåt
- lg:c-space--xl är på stationära skämar och uppåt
Om tomrummet inte behöver ändras för olika enheter kan du bara definiera standardtomrummet.
Översikt av storlekarna
Klassnamn | Storlek i rem | Storlek i pixlar |
|---|---|---|
c-space--xxs | 0.125 | 2 |
c-space--xs | 0,25 | 4 |
c-space--s | 0,5 | 8 |
c-space--m | 1 | 16 |
c-space--l | 2 | 32 |
c-space--xl | 4 | 64 |
Exempel
c-space--xxs
c-space--xs
c-space--s
c-space--m
c-space--l
c-space--xl
<div>c-space--xxs</div>
<div class="c-space--xxs"></div>
<div>c-space--xs</div>
<div class="c-space--xs"></div>
<div>c-space--s</div>
<div class="c-space--s"></div>
<div>c-space--m</div>
<div class="c-space--m"></div>
<div>c-space--l</div>
<div class="c-space--l"></div>
<div>c-space--xl</div>
<div class="c-space--xl"></div>Senast publicerad
Sidansvarig för sidan är Styleguide