CSS Boxlayout
"Block" och "Inline"
De flesta taggarna är antingen ett block element eller inline element.
Block startar och slutar oftast med en ny rad i webbläsaren.
Till exempel har vi div, p, h1, ul, table .
Inline elements visas normalt utan att starta på en ny rad.
Till exempel span, strong, a, img, td .
Div-taggen är en tagg utan defaultinställningar förutom att den är ett block element och får en ny rad före respektive efter div-taggen start och slut. Den används som behållare och kan innehålla andra block eller inline taggar.
Vi styr utseendet och uppförandet med stilmallsinställningar. Div-taggen aänvänds för att styra utseendet på webbsidor, gruppera och styra webbsidans innehåll.
Boxmodellen
En total bredd på ovanstående exempel blir:
bredd = content(width) + 2*padding + 2*borderwidth + 2*margin
(när det är lika på både vänster och höger sida)
se även w3schools info
Byt räknesätt! box-sizing: border-box;
<style>
* {
box-sizing: border-box;
}
#example1 {
width: 300px;
padding: 40px;
border: 15px solid blue;
}
#example2 {
width: 300px;
padding: 10px;
border: 2px solid red;
}
</style>
<div id="example1">En div på 300px, oavsett bredd på padding eller border!</div>
<br>
<div id="example2">En till!</div>
En total bredd på ovanstående exempel blir:
bredd = content(width)