box-sizing med CSS

Når vi designer nettsider med CSS må vi forholde oss til måten størrelsen på elementer beregnes. Det er ikke så enkelt som at bredden/høyden man setter er den plassen elementet krever på skjermen.

.top{
width: 200px;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
}

Som vi ser av dette eksempelet så blir bredden på selve boksen 222px. Dette skyldes at padding (10px+10px) + border (1px+1px) legges til bredden. I tillegg krever margen 10px på hver side, slik at den totale plassen som opptas på skjermen er 242px.

I en responsiv layout vil dette by på utfordringer, da vi setter width i prosent. Resultatet blir at størrelsen blir en kombinasjon av prosent og pixler og vi mister kontrollen. La oss si du skal ha to kolonner på 50% og du legger til 10px padding. Hva blir da resultatet? 50%+10px+10px+50%+10px+10px=?

Løsning: box-sizing: border-box

Ved å bruke box-sizing: border-box endrer vi måten størrelsen beregnes på. Her utelates padding og border fra beregningen (disse verdiene «spiser» heller av width), noe som gjør det enklere å legge til padding og border i pixler, på elementer som har en bredde i prosent.

box-sizing: border-box

.top{
box-sizing: border-box;
width: 200px;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
}

Her har vi nøyaktig samme kode som over, med unntak av box-sizing. I resultatet ser vi at bredden er 200px (det vi har satt som width). Padding og border regnes altså ikke med i bredden slik det gjorde i første eksempel.

Konklusjon

På en responsiv nettside vil box-sizing: border-box gjør det mulig å definere padding og border, uten å bekymre seg for at dette påvirker størrelsen og plasseringen av elementer.

.top{
box-sizing: border-box;
width: 90%;
padding: 10px;
border: 1px solid #ccc;
}

Det finnes alternative metoder når du jobber med en responsiv side, for eksempel kan du velge å sette margin og padding på innholdet (h1, h2, p, img osv), istedenfor på elementet innholdet er plassert i. Da påvirkes ikke størrelsen på boksen, da verdiene legges på elementer på innsiden. Men, dette kan fort være en mer krevende oppgave, så box-sizing vil sannsynligvis gjøre jobben enklere for deg.

Vil du lære mer om CSS3? Ta en titt på våre CSS-kurs.