CSS Box Model

Wat is het CSS Box Model? 

 In CSS wordt elk element op een webpagina beschouwd als een rechthoekige doos. Het CSS Box Model beschrijft deze doos en bestaat uit: 

 

 Content : De inhoud van het element (tekst, afbeeldingen, enz.). 

 Padding : Ruimte rondom de content, binnen de rand. 

 Border : De rand om de padding en content heen. 

 Margin : Ruimte buiten de rand, scheidt het element van andere elementen. 

 

 Visualisatie van het Box Model 

 

 Eigenschappen van het Box Model 

 

 Content : width , height 

 Padding : padding-top , padding-right , padding-bottom , padding-left 

 Border : border-width , border-style , border-color 

 Margin : margin-top , margin-right , margin-bottom , margin-left 

 

 Voorbeeld 

 .box {

 width: 200px;

 height: 100px;

 padding: 10px;

 border: 5px solid black;

 margin: 20px;

} 

 Uitleg: 

 

 width en height bepalen de grootte van de content. 

 padding voegt ruimte toe binnen de border. 

 border definieert de rand rondom het element. 

 margin voegt ruimte toe buiten de border, tussen dit element en anderen.