BoxModel

När vi säger box-model inom webbutvecklingen så menar vi ett objekt som definierar upp ett utrymme som enklast kan förklaras som en ruta med flera lager runt innehållet. Detta brukar kallas för boxmodellen och är ett sätt att kunna gruppera och dela upp innehåll i olika delar som gör det lätt att skapa olika utseenden och layouter på en webbsida. Det vi kallar för ett block-element är alltid uppbyggda enligt boxmodell-principen, men ibland kan man även använda samma tankemodell för inline-element.

I grunden så vill ett blockelement ligga på sin egen plats i det normala flödet på en hemsida. Det gör alltså radbrytningar i texten om det placeras mitt i en löpande text. Det vill inte ha någa andra element placerade till höger eller vänster om sig själv. Det finns dock ett flertal olika sätt att placera blockelement bredd i bredd och vi ska titta på dessa senare när vi pratar om positionering av element. Men för förstå hur positionering fungerar så måste man först förstå hur boxmodellen fungerar därför att dessa bygger till stor del på varandra som vi får se senare.      

En boxmodell delas in i följande områden (inifrån och ut):

Margin
Border
Padding
Content
Här finns det innehåll!
När man sätter width och height så är det detta område man påverkar.
Figur 1: Box-model

Styling av boxmodellen

Vi kan förändra varje del av boxmodellen på olika sätt. Här förklaras kort de viktigaste egenskaperna och hur syntaxen för dessa ser ut.

Content

Content är innehållet i blockelemetet. Här hamnar text och bilder som man lägger till inuti ett blockelement så som en <div>, <h1> eller en <p>.
Området för blockelementets innehåll kan sättas genom att man lägger width för att sätta bredden och height för att sätta höjden. Om man inte bestämmer storleken med width och height så sätts storleken av innehållet i blocket, till exempel den text man skriver in.

När man börjar göra layouts med olika blockelement så kommer man ibland vilja sätta blockelement bredvid varandra. Då kan man behöva veta mer exakt hur stort område ett block tar upp.

Den totala bredden av blockelementet blir normalt sett:
margin-left + border-left + padding-left + content-width + padding-right + border-right + margin-right

Men i vissa typer av positionering (position) så kan man ignorera margin, men mer om positionering i en annan förklaring.

Box-sizing

Eftersom det behövs lite addition för att ta reda på den totala bredden, vilket kan bli ganska komplicerat om man till exempel sätter width: 50% vilket gör att blockelementet tar sin storlek från bredden på det element som blockelementet finns i (50% av dess förälder). En blandning av padding, width och border-size med olika måttenheter kan göra det väldigt komplicerat att skapa layouter.
Som tur är så finns det en lösning som kallas box-sizing.
Genom att sätta:
box-sizing: border-box;
width: 50%;
Så sätter man bredden på ett sånt sätt att det är den totala bredden ut till utsidan av ramen. detta gör att det inte spelar någon roll hur man beskriver storleken på bordern och paddingen eftersom de nu ingår i den bredd som man har satt.
Standardvärdet på box-sizing är:
box-sizing: content-box;
Om man inte ändrar detta så sätts width automatiskt på innehållet.

width: 400px;
padding: 40px;
background-color: khaki;
border: 15px solid crimson;
margin: 20px auto;
box-sizing: content-box;
width: 400px;
padding: 40px;
background-color: khaki;
border: 15px solid crimson;
margin: 20px auto;
box-sizing: border-box;
Bredden och övrig formatering på båda lådorna är samma, men den ena sätter width på content, medan den andra sätter width på utsidan av border.

Padding

Padding defineras som det område som finns mellan bordern och innehållet i blockelementet. Om man sätter en bakgrundsfärg eller en bakgrundsbild på elementet så kommer denna att synas även i padding-området.

Grundkommandot skrivs som:
padding: 30px;
Vilket ger ett avstånd från insidan bordern till innehållet på 30 pixlar åt alla håll.

Om man vill sätta padding endast i en viss riktning, eller om man vill att en specifik riktning ska ha en annorlunda formattering så kan man också skriva:
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 30px;
Detta ger olika formatering i olika riktningar.

Man kan också sätta flera attribut på egenskapen padding på följande sätt:
padding: 10px 20px; (Detta ger elementet en margin på top/bottom på 10px och höger/vänster 20px)
padding: 10px 15px 20px 30px;
(Detta ger elementet en padding på top: 10px höger: 15px, bottom: 20px och left: 30px.)
padding: auto;
(Detta centrerar elementet i mitten genom att sätta båda sido-margins till lika stora.)

Border

Border är ett område som avgränsar det yttre genomskinliga området margin med det inre och stylebara området som består av padding och innehåll(content). Detta block är lika brett (samma width) som förklaringen för margin (ovan) och padding (nedanför). Som ni kan se så lägger sig bordern utanför bredden vilket gör detta element bredare än de andra. 

Bordern kan variera i utseende allt ifrån ett par olika standard formateringar, tjocklekar och färger till helt egengjorda ramar som kan se ut på valfritt sätt. Man kan sätta en radie på hörnen på en border (se exempel, övre högra hörnet i den här rutan) och detta kommer också att beskära eventuell bakrund som man satt på elementet så att området utanför radien blir genomskinligt.

För att skapa en border så måste man definiera tre egenskaper dessa är:
border-width: 2px; - Bredden på ramen, sätts vanligtvis i pixlar (px).
border-style: solid; - Vilken stil ramen ska ha, detta attribut måste alltid finnas. (se även exempel nedan)
border-color: red; - Färgen på ramen.

Kortkommandot för att sätta en border med alla tre attributen kan skrivas:

border: 2px solid red;

Här följer exempel med olika styles man kan sätta:
border: 4px dotted black;
border: 3px dashed #106E06;
border: 4px double rgba(0,3,180,1.00);
border: 7px groove silver;
border: 7px ridge gold;
border: 5px inset hsla(26,63%,51%,1.00);
border: border: 5px outset darkolivegreen;
background-color: cadetblue;
border-color: red green blue saddlebrown;
border-style: double dashed dotted solid;
border-width: 7px 10px 8px 36px;

I det sista exemplet visas att det går bra att blanda både stilar, färger och tjocklekar. Men man bör kanske försöka få till något som är snyggare än det jag gjort. 😜

Om man vill sätta samma radie i alla hörnen på sin ram så kan man göra det genom att skriva:
border-radius: 10px; Radier runt mig! - alla hörn får samma radie.
Man kan också göra lite olika varianter för att sätta olika radier och dessutom välja vilka hörn som ska påverkas.
border-radius: 10px 5px; Radier runt mig! - (TopLeft och BottomRight) (TopRight och BottomLeft)
border-radius: 10px 5px 20px 0px; Radier runt mig! - TopLeft TopRight BottomRight BottomLeft
border-bottom-left-radius: 15px; Radier runt mig!
border-top-right-radius: 50px 13px; Radier runt mig! - asymetriska radier går också att fixa.

Man kan också skapa sin egen ram utifrån en bild som man skapat.
Bilden som skapat den här ramen ser ut såhär: rambild Eftersom den här bilden är 41x41 pixlar stor och skapad så att den har hörnbitar som är 20x20 pixlar stora, så delar vi upp den så. Det innebär att området mellan hörnen endast är en pixel bred. Men efterssom denna pixel kommer att repeteras utefter långsidorna så kommer de att bilda långa streck. På det viset så sträcker vi ut den lilla bilden till att räcka runt hela ramen. Koden för att visa ramen blir då:
border: 20px solid transparent;
border-image: url("../bilder/cust_border.png") 20 round;

Här har vi en lite juligare ram som vi skapar genom följande bild: Julram Den är lite större än vad den andra bilden är. Hela bilden är 100x100 pixlar stor. Men det som skiljer mest är att området mellan hörnbitarna är lite längre sektioner som kommer att repeteras längs efter långsidorna. Hörnen tar upp 30 pixlar, medan bitarna mellan hörnen är 40 pixlar. Man kan ganska tydligt se hur mönstret repeteras utefter kantlinjerna, men om man ser till att sidorna inte är direkta kopior av varandra så blir det lite mindre synligt.
border: 30px solid transparent;
border-image: url("../bilder/ram_jul_30_40_30.png") 30 round;

Man bör vara lite försiktig med egna ramar om man samtidigt vill ha en bakgrundsbild eller bakgrundsfärg i sitt blockelement eftersom dessa startar vid ramens ytterkant och därför kommer att vara synlig under ramen. När man är medveten om detta kan man dock bygga bort det problemet. Men mer om det en annan gång.

Margin

En margin är alltid ett helt transparant område som ligger utanför ramen. Margin används för att sätta ett avstånd till övriga element som finns på en hemsida.  

Grundkommandot skrivs som:
margin: 30px;
Vilket ger en genomskinlig ytterkant utanför bordern på 30 pixlar åt alla håll.

Om man vill sätta margin endast i en viss riktning, eller om man vill att en specifik riktning ska ha en annorlunda formattering så kan man också skriva:
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 30px;
Detta ger olika formatering åt olika sidor.

Man kan också sätta flera attribut på egenskapen margin på följande sätt:
margin: 10px 20px; (Detta ger elementet en margin på top/bottom på 10px och höger/vänster 20px)
margin: 10px 15px 20px 30px; (Detta ger elementet en margin på top: 10px höger: 15px, bottom: 20px och left: 30px.)
margin: auto; (Detta centrerar elementet i mitten genom att sätta båda sido-margins till lika stora.)

En till egenskap som margin har är att om man har två element på sidan av varandra så adderas deras respektive värden tillsammans för att skapa ett totalt avstånd mellan objekten som är summan av dessa avstånd. Men om man placerar två element med margin ovanför/under varandra så sker något som kallas för "margin collapse" vilket gör att endast det största av de satta marginvärdena kommer att påverka avståndet mellan blocken.