CSS Box model

Alle HTML-elementen kunnen worden beschouwd als boxen.

Het CSS Box model

De CSS box, waarin elk html element geplaatst wordt heeft een marge (margin), een rand (border) en een opvulling (padding). Van deze drie kenmerken kan de dikte voor alle vier de zijden worden bepaald. Cascading Style Sheets gaat ervan uit dat elk element staat in een rechthoekig gebied, de box.

Het CSS box model is in wezen een box die om elk HTML-element geplaatst wordt. Het bestaat uit: marges, randen, opvulling en de inhoud. De afbeelding hieronder illustreert het box model.

Content - De inhoud van het box, waar tekst en afbeeldingen verschijnen.

Padding - Wist een gebied rond de inhoud, de padding is dan transparant.

Border - Een rand die rond de padding en inhoud gaat.

Margin - Wist een gebied buiten de grens, de margin is dan transparant.

Voorbeeld van een box model: 1

div {
  background-color: #f2f2f2;
  width: 300px;
  border: 15px solid #4196B5;
  padding: 40px;
  margin: 20px;
}

Uitproberen

Voorbeeld van een box model: 2

div {
  background-color: #f2f2f2;
  width: 300px;
  border: 15px solid #FFB05B;  
  padding: 15px;
  margin: 20px auto;  
}

Uitproberen

Met het box model kunnen we een rand rond de elementen plaatsen en ruimte tussen de elementen creëren.

Breedte en hoogte van de elementen

Wanneer je de breedte en hoogte van een element instelt met behulp van de CSS eigenschappen width en height, stel je in werkelijkheid alleen de breedte en hoogte van het inhoudsgebied van dat element in. Om de breedte en hoogte van een element in alle browsers correct in te stellen, moet je weten hoe het boxmodel werkt.

Wanneer je de eigenschappen width en height van een element instelt met CSS, stel je alleen de breedte en hoogte van het inhoudsgebied in. Om de volledige grootte van een element te berekenen, moet je ook rekening houden met de padding, border en margin.

Voorbeeld:

div {
  width: 290px;
  padding: 10px;
  border: 5px solid #999;
  margin: 0;
}

Uitproberen

De berekening van het bovenstaande <div> element in het voorbeeld is als volgt:

290px  (width)
+ 10px (links + rechts padding)
+ 5px  (links + rechts border)
+ 0px  (links + rechts margin)
= Totaal: 320px breed

Vorige Volgende

	Ad blocker gedetecteerd!
	Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.