banner

3.2: Het BoxModel

We spreken bij CSS vaak van een BoxModel, dit model kan slaan op de meeste elementen die we tot nu toe besproken hebben. Het boxmodel ziet er alsvolgt uit:

BoxModel

Je ziet dat er in dit model drie verschillende opties zijn, namelijk: margin, border en padding. Deze drie opties hebben elk vier verschillende toevoegingen, namelijk: top, right, bottom en left. Samen kunnen ze een style-optie vormen om een waarde van het model te veranderen. Margin gaat over de hoeveelheid ruimte dat zich om een element zit. Dit kan je dus voor elke zijde van een element anders aangeven. Hieronder een voorbeelden van het gebruik van de verschillende opties.

Margin

html5 code CSS bestand Internet Explorer

<html>
  <head>
    <title>Titel van website</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" media="all" />
  </head>
<body>
<div id="boven"><p>Boven</p></div>
<div id="onder"><p>Onder</p></div>
</body>
</html>

#boven {
background-color: #99CC00;
width: 100%;
height: 100px;
margin-left: 50px;
}

#onder {
background-color:#FF9900;
width: 150px;
height: 100px;
margin-left: 10px;
margin-top: 20px;
}

Boven

Onder

De bovenste div maakt gebruik van de style-optie margin-left, de heeft in het voorbeeld een waarde van 50 pixels. Hierdoor verschuift het div-element 50 pixels van de linkerrand af. De onderste div heeft ook een margin-left, alleen deze van 10 pixels. Daarnaast heeft de onderste div ook een margin-top van 20 pixels, hierdoor komt er een witte ruimte van 20 pixels tussen de bovenste en onderste div.

Padding

html5 code CSS bestand Internet Explorer

<html>
  <head>
    <title>Titel van website</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" media="all" />
  </head>
<body>
<div id="boven"><p>Boven</p></div>
<div id="onder"><p>Onder</p></div>
</body>
</html>

#boven {
background-color: #99CC00;
width: 100%;
height: 100px;
margin-left: 50px;
padding-left: 20px;
}

#onder {
background-color:#FF9900;
width: 150px;
height: 100px;
margin-left: 10px;
margin-top: 20px;
padding-left: 40px;
padding-top: 20px;
}

Boven

Onder

In de bovenste div hebben we nu naast de margin-left ook de style-optie padding-left toegevoegd. Hierdoor verschuift alles wat binnen in de div zit 20 pixels van de linkerrand af. De onderste div heeft twee padding opties, namelijk padding-left en padding-top. Hierdoor verschuift alles binnen de div zowel 40 pixels naar rechts als 20 pixels naar beneden.

Border

html5 code CSS bestand Internet Explorer

<html>
  <head>
    <title>Titel van website</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" media="all" />
  </head>
<body>
<div id="boven"><p>Boven</p></div>
<div id="onder"><p>Onder</p></div>
</body>
</html>

#boven {
background-color: #99CC00;
width: 100%;
height: 100px;
margin-left: 50px;
padding-left: 20px;
border-left: 5px dotted #006600;
}

#onder {
background-color:#FF9900;
width: 150px;
height: 100px;
margin-left: 10px;
margin-top: 20px;
padding-left: 40px;
padding-top: 20px;
border-top: 10px solid #FF6600;
border-bottom: 5px outset #FF6600;
}

Boven

Onder

Borders kennen we al reeds van tabellen, maar je kan ze voor meerdere elementen gebruiken (div's, img, p's etc). We gebruiken ze op dezelfde manier als we al eerder gedaan hebben, namelijk de style-optie (border-left:) met een waarde die weer 3 onderdelen bevat (aantal pixels, type border, kleur van de border). De eerste div heeft in dit voorbeeld alleen een border aan de linkerkant. De tweede div heeft twee verschillende borders voor boven en onder.