Studieanker

# Box-model

De elementen op een pagina worden in een bepaald box-model opgenomen om ze op een correcte manier in de lay-out van een pagina op te nemen. In de standaard flow-lay-out bestaan er drie weergavetypes: inline, block en inline-block. Concreet vertellen ze aan de browser wat er moet gebeuren met een element in een lay-out: doorlopen of opbreken.

# block

Een element met weergavetype (display type) block heeft de volgende eigenschappen:

  • Begint automatisch op een nieuwe lijn.
  • Voegt witruimte aan de randen van het blok toe.
  • Neemt de volledige breedte van het ouderelement in beslag.
  • De hoogte past zich aan aan de inhoud.

Voorbeelden van blokelementen zijn: <p>, <h1>, <address>, ...

# inline

Een element met display type inline heeft de volgende eigenschappen:

  • Het wordt opgenomen in de lijn van de tekst en breekt ze dus niet op. Je kan ze dus in het midden van een zin gebruiken.
  • Voegt nergens witruimte toe.
  • De breedte past zich aan aan de inhoud.

Voorbeelden van inline-elementen zijn: <a>, <img>, <b>, ...

# inline-block

Een element met display type inline-block combineert de eigenschappen van beide types. Het laat toe dat blokken hun standaardwerking behouden, maar toch naast elkaar worden gezet (mits hun samengetelde breedte de breedte van het ouderelement niet overschrijdt). Ze beginnen dus niet meer automatisch op een nieuwe lijn. Er mag witruimte aan alle kanten toegevoegd worden via CSS.

Standaard bestaan er geen inline-elementen. Om gebruik te maken van dit display type moet je het veranderen via CSS.

# Voorbeeld

Bekijk het resultaat van de volgende HTML-code (met <style> element voor korte opmaak) in de browser om een idee te krijgen van het verschil tussen een blok- en inline element. Speel ook eens met de breedte van het browservenster om te kijken hoe de lay-out zich aanpast.

<!DOCTYPE html>
<html lang="nl-BE">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Boxmodel</title>
    <link rel="stylesheet" href="boxmodel.css">
    <style>
        .blok {
            background-color: cyan;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <h1>Boxmodel</h1>
    <p class="blok">Een kop en paragraaf zijn blokken, waardoor ze automatisch op een
        nieuwe regel beginnen en standaard de breedte gelijk is aan de breedte van het
        ouderelement, in dit geval het body-element.</p>
    <p class="blok">Je kan randen en achtergrondkleuren gebruiken om snel een idee te
        krijgen hoe ver een blok reikt.</p>
    <p>Een <b>inline element</b>, zoals een <a href="#">link</a> of afbeelding
        <img src="https://picsum.photos/100/"> kan binnen een regel tekst gebruikt worden.</p>
</body>
</html>

# Display type veranderen

Met de CSS-eigenschap display verander je het display type van een element. Het box-model zal vervolgens zorgen dat de aanpassingen gereflecteerd worden op de pagina, ook als je het display-type later aanpast (zonder de pagina te moeten vernieuwen). Dit concept is belangrijk voor responsive webdesign (lay-out aanpassen aan resolutie, zoals voor mobiele apparaten).

De eigenschap display kan verschillende waardes krijgen. We beperken ons voorlopig tot de drie bovenstaande: block, inline en inline-block.

a {
    /* Verander link-elementen van inline naar block
       Ze zorgen dus voor een opbraak in lay-out en
       starten op een nieuwe regel */
    display: block;
}

← Oefeningen CSS-opmaak →