Jan
CSS Grundkunskap - Boxmodellen
Kategorier: CSSBoxmodellen är en av CSS grundstenar. Lär man sig om denna har man kommit en bra bit på väg att förstå hur mycket av all CSS fungerar, och varför elementen beter sig som de gör på sidan. Varje element på en sida genererar en box, eller en låda. En fyrkant helt enkelt. Hur bredd, höjd och andra värden beräknas på dessa fyrkanter är det som kan skilja sig lite mellan olika webbläsare, men i stort sett är det ganska simpla regler det handlar om.
Man kan enkelt verifiera att alla element är boxar genom att man sätter en ram runt dem. Här är ett exempel på en enkel sida där jag tagit flera olika sorters element och gett dem en ram som syns.
Varje låda består av innehåll, utanför detta kommer utfyllnad, ram och marginal. Eftersom de tre sista attributen skrivs på engelska i CSS kommer jag att benämna dem på deras engelska motsvarighet hädanefter: padding, border och margin. I det andra exemplet illustreras de olika attributen med hjälp av en lista (UL) som har två listobjekt i sig (LI). UL-elementet har en svart border på 20 pixlar, ingen padding och ingen margin och en grön bakgrundsfärg. Varje LI-element har en margin på 20 pixlar, en vit border på 20 pixlar och till sist en padding på 20 pixlar, bakgrundsfärgen på varje LI är röd.
För enkelhetens skull slänger jag även in en bild på hur exempel 2 ser ut.
Den totala bredden och höjden på en box räknas ut genom att man lägger ihop bredden resp. höjden på margin, border, padding och innehåll. Beroende på om en webbläsare kör i quirks mode eller standards compliance mode kommer den att tolka boxmodellen lite olika, men det hör inte riktigt till den här artikeln. För stunden förutsätter vi att webbläsaren kör i standards compliance mode.
Om man tittar på boxen för varje LI "inifrån" och ut, kommer de olika delarna i följande ordning:
Innehållet (gul bakgrund)
Padding (röd, egentligen är detta bakgrundsfärgen på LI, men eftersom det inte går att sätta en färg på padding lyser bakgrunden igenom)
Border (vit)
Margin (grön, man kan inte heller sätta en färg på en margin, därför lyser den gröna bakgrunden på UL igenom)
Generellt kan man säga att padding fyller på med tomrum innanför ramen. Margin däremot fyller på med tomrum utanför boxen och skapar mellanrum från ramen och utåt.
Den skarpsynte reagerar också på att det bara är 20 pixlar i mellanrummet mellan det övre LI-elementet och det undre. Om båda dessa har en margin på 20 pixlar borde det totala avståndet bli 40 pixlar. Det är helt korrekt, men det finns något som kallas för margin-collapse. Detta innebär att om man har två boxar i det vanliga flödet på sidan (floats och positionering blir en egen artikel i sig) kommer den vertikala marginalen som nudder en annan box vertikala marginal att kollapsa och bara halva marginalen kommer att visas. Dumt kan tyckas, men det finns en mening med detta.
Exempel 3:
I det tredje exemplet har vi ett DIV-element som innehåller två paragrafer med lite text i. Som det är nu är avståndet ovanför och under första och sista paragrafen samma som avståndet mellan paragraferna. Snyggt och prydligt med andra ord. Om inte margin-collapse fanns skulle avståndet mellan de två paragraferna vara dubbelt så högt som avståndet ovanför och under första och sista paragrafen. Se fjärde exemplet där jag förhindrat margin-collapse.
Exempel 4:
På grund av hur olika webbläsare är gjorda kommer de att ge olika element olika standardvärden för margin, padding och border för olika element. Dessa skiljer sig från en webbläsare till en annan (s.k. Default Browser Style). Några exempel på element som brukar ha "egen" styling är listor, knappar, rubriker och paragrafer. Div-element och spans brukar i regel inte ha några av webbläsaren förbestämda värden.
Detta var en snabb och förhoppningsvis ganska lättförståelig artikel om boxmodellen och hur den är tänkt att fungera enligt W3C.
TYCKTE DU OM ARTIKELN?
