CSS -boxmodel
Alle HTML-elementen kunnen worden beschouwd als boxen.
Het CSS Box-model
In CSS wordt de term "doosmodel" gebruikt wanneer het over ontwerp en lay-out gaat.
Het CSS-boxmodel is in wezen een box die zich om elk HTML-element wikkelt. Het bestaat uit: marges, randen, opvulling en de feitelijke inhoud. De afbeelding hieronder illustreert het boxmodel:
Uitleg van de verschillende onderdelen:
- Inhoud - De inhoud van het vak, waar tekst en afbeeldingen verschijnen
- Opvulling - Wist een gebied rond de inhoud. De vulling is transparant
- Rand - Een rand die rond de opvulling en inhoud gaat
- Marge - Wist een gebied buiten de grens. De marge is transparant
Met het doosmodel kunnen we een rand rond elementen toevoegen en ruimte tussen elementen definiëren.
Voorbeeld
Demonstratie van het doosmodel:
div {
width: 300px;
border: 15px solid
green;
padding: 50px;
margin: 20px;
}
Breedte en hoogte van een element
In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.
Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.
Example
This <div> element will have a total width of 350px:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Here is the calculation:
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin