Kafli 11: Box model

Box módelið lýsir því hvernig rétthyrnd box fyrir element eru mynduð en ein leið til að byrja að hugsa um CSS er sem samansafn af boxum sem er raðað saman til að mynda útlit.

Margin er ysta lag boxsins og getum við skilgreint lengd í hverja átt með margin-top, margin-right, margin-bottom og margin-left. Lengd getur verið skilgreind sem neikvæð tala en þá er box dregið í viðkomandi átt um töluna. Litur á boxi er ekki settur á margin svæði box, það „hleypir“ lit þess sem er bakvið það í gegn.

Ef auto er skilgreint fyrir vinstri og hægri hliðar er box miðjað innan foreldri síns, vafri reiknar sjálfkrafa hve mikið margin á að vera vinstra og hægra megin. Shorthand skilgreining á margin er:

Þar sem margin er ysta lag boxisns geta lóðrétt margin tveggja eða fleiri boxa í röð geta fallið saman og er það kallað collapsing margin. Einnig getur það gerst fyrir box innan í boxi. Getur oft komið á óvart en getur líka verið gagnlegt. Nokkuð flóknar reglur segja til um hvenær og hvernig það gerist.

Border er næst ystalag boxins og teiknar jaðar utan um það. Hægt er að skilgreina:

Fyrir hverja átt er hægt að skilgreina hvert gildi, t.d. border-top-width. Eða nota border shorthand sem skilgreinir allt fyrir allar hliðar eða per hlið með t.d. border-top.

Næst innst í boxinu er padding. Það er skilgreint eins og margin, einnig fyrir shorthand. Munur er:

Við getum skilgreint breidd efnis með width og hæð með height. Heildarstærð sem boxið tekur er þá:

Það getur leitt til vandræða þar sem útlit notar hlutfallslegar stærðir og nákvæmar stærðir, t.d. ef við skilgreinum border með px en viljum að boxið í heild sinni fylli alveg upp í foreldri sitt með 100%.

Að takmarka hæð á elementum er hættulegur leikur. Breidd á elementum miðast alltaf við breidd á vafra (eða því tæki sem við erum að skoða með) og því auðveldara að takmarka það og þá sérstaklega með hlutfallslegum lengdum. width: 100%; á element þýðir að það fyllir upp í lárétt pláss foreldris. Ef við skilgreinum height: 100%;, hvað þýðir það? Hæð á allri síðu? Hæð á foreldri? Hvað ef sú hæð er skilgreind útfrá hæð barnsins? Við lendum í enn frekari vandræðum ef við grípum til þess að nota nákvæm gildi, t.d. height: 100px;, því hvað gerist ef efnið þarf meira pláss? Í flestum tilfellum viljum við því takmarka breidd en láta hæðina flæða eftir því sem efnið þarf.

Því minna pláss sem foreldri býður upp á, því meiri líkur á að textinn „flæði út úr“ p elementi.

CSS3 skilgreinir box-sizing sem breytir því hvernig box modelið er reiknað:

Að breyta því hvernig við reiknum heildarstærð á boxi getur oft á tíðum verið til góðs. Við höfum þá frelsi til að eiga við „innri“ gildi boxsins (border og padding) án þess að það hafi áhrif á heildarstærðina. T.d. ef við höfum box sem eiga að raðast saman í lárétta röð og hvert box á að taka 25% af breidd foreldris en við viljum líka að það hafi border og padding svo efni fái að anda. Án þess að nota box-sizing: border-box; þyrftum við því að fara í að reikna width án þessara gilda, sem eru hugsanlega nákvæm gildi, eða bæta við fleiri elementum innan boxsins til að útbúa pláss.

Stundum viljum við að boxin okkar séu aldrei minni eða stærri en ákveðið (oftast nákvæmar stærðir) á hæð eða breidd:

Þetta getur verið gott þegar við vinnum með box sem skalast en við vitum að undir/yfir ákveðinni breidd líta þau ekki vel út eða verða ónothæf. Þá getum við skilgreint breidd þeirra í hlutfallslegri stærð, t.d. width: 100%; en takmarkað þá með min-width og max-width með nákvæmum stærðum.

Þegar við byrjum að vinna með útlit í CSS er mjög gott að muna það að lang flest í CSS er rétthyrnt box!