Box-modellen
CSS
De flesta element är block-element per default
Boxmodellen
- Börjar på ny rad. "Stackar" på varandra
- Deras bredd är 100% av viewport
- Deras höjd är 0
- Höjden ändras av innehållet
DEMO!
Margin är utrymmet runt ett element. Vi kan kontrollera det i fyra riktningar.
Använda margin
- margin-left
- margin-right
- margin-top
- margin-bottom
DEMO!
margin "shorthand"
margin: 10px 20px 30px 40px;margin: 10px 20px;margin: 10px;TOP
RIGHT
BOTTOM
LEFT
Padding är utrymmet inuti element. Syntaxen är samma som margin och även dess shorthand.
Använda padding
Skillnaden med padding är att det inkluderar bakgrundsfärgen.
DEMO!
Boxmodellen
Margin vs Padding
- Om du behöver utrymme till nästa element, använd margin
- Om du behöver mer bakgrund, använd padding
Border skapar en kant runt elementet. Har tre egenskaper.
Border
- border-width
- border-style
- border-color
Border shorthand
p {
border-width: 2px;
border-style: solid;
border-color: #000;
}p {
border: 2px solid #000;
}Totala bredden och höjden
Bredd och höjd, width och height, anger enbart storleken på innehållsdelen och övriga delar av boxen ligger utanför detta värde.
För att få ut den totala bredden/höjden som din box kommer att ta upp måste du själv summera ihop width, bredden på padding och bredden på eventuell kantlinje (border). Detta kan bli rätt krångligt om du vill ange en exakt storlek på en box.
Detta måttsätt är default (box-sizing: content-box;)
box-sizing
Med denna variant så inkluderar värdet som man anger för bredd eller höjd, width och height, såväl utfyllnad (padding), som kantlinje (border). Marginalen, margin, har dock en egen bredd. Detta gör att det är mycket enklare att anpassa boxstorleken till hela innehållet.
I de fall border-box gäller får elementet alltså den bredd som sätts i width oavsett vilka andra egenskaper som sätts (det samma gäller för höjd-egenskapen). Detta gör det mycket enklare att passa samman flera element på samma rad.
/* Lägg högst upp i CSS. * = alla element*/
* {
box-sizing: border-box;
}Övning!
Bygg trafikljuset med hjälp av CSS
