Inleiding tot het CSS box model.

Het CSS box model is een nogal ingewikkelde aangelegenheid, temeer omdat verschillende browsers in het verleden een wat eigen interpretatie van de regels hadden. Het box model beschrijft hoe HTML elementen ingepakt worden in fictieve boxen en hoe deze boxen op de pagina gepositioneerd worden. Bovendien hebben de boxen margins (ruimte aan de buitenkant), paddings (ruimte aan de binnenkant) en kunnen ze zichtbare borders (randen) hebben.

Inline- tegenover block-elementen

Allereerst bespreken we het belangrijkste aspect van het box model: het verschil tussen inline- en block-elementen. In principe heeft elk HTML element een van de drie eigenschappen: block, inline, of niet-weergegeven. Tot die laatste groep behoren elementen die niet bedoeld zijn om weergegeven te worden, zoals <meta>, <style>, <script>, enz.

Het is van essentieel belang voor een CSS codeerder dat hij/zij het verschil tussen inline- en block-elementen begrijpt. Een block-element pakt de hele horizontale ruimte die beschikbaar is, ongeacht hoeveel het nodig heeft. Dit heeft het gevolg dat een block-element de na hem komende informatie (tekst of andere HTML elementen) automatisch naar een nieuwe regel duwt. Dus twee block elementen kunnen niet op één regel staan, tenzij we speciale maatregelen nemen. Een van de speciale maatregelen is het gebruik van floating ("drijvende") elementen, waarvan meerdere op één regel kunnen staan. Hier komen we later op terug.

In tegenstelling tot het block-element, onderbreekt een inline-element niet de invoer van tekst met plotselinge overgang naar een nieuwe regel. Een inline-element pakt precies genoeg horizontale ruimte om zijn inhoud weer te geven. Na hem kunnen meer inline-elementen weergegeven worden op de regel, totdat deze vol is.

Een handige ezelsbrug is om aan een inline-element te denken als een zin of een zinsdeel, en aan een block-element als een alinea. Een zin of zinsdeel kan samen met andere zinnen een alinea vormen, maar een alinea staat apart, afgescheiden door lege regels.

Zoals boven gesteld, worden elementen geboren als niet-weergegeven, inline-, of block-elementen. Voorbeelden van inline-tags zijn <span>, (het standaard inline element), hyperlinks (anchors) <a href= ...>, afbeeldingen (images) <img>, en invoer elementen <input>. Voorbeelden van block-tags zijn <div> (het standaard block-element), header tags <h1>, ... <h6>, paragraphs (alinea's) <p>, unordered lists (ongeordende lijsten) <ul>, en tabellen <table>.

Met deze theorie uit de weg, zijn we klaar om aan de hand van een eenvoudig voorbeeld de verschillen te laten zien:

<style type="text/css">
.box {
	background-color: Orange;
}
</style>

<div class="box">Block 1</div><div class="box">Block 2</div>
<br>
<span class="box">This is an inline element... </span><span class="box">and so is this</span>

Bekijk dit voorbeeld goed en merk op dat alle elementen (inline én block) dezelfde class hebben. Toch gedragen de elementen zich verschillend, zoals net beschreven. Het meest opvallend is het gedrag van de div elementen - die standaard block-elementen zijn. Zie je dat zij de hele beschikbare horizontale ruimte innemen, en dat het eerste div block het tweede naar een volgende regel duwt? De span elementen - die standaard inline-elementen zijn - gedragen zich heel anders; zij worden aaneen geregen en vormen deel van dezelfde zin.

Breedtes, hoogtes en kantlijnen van inline-elementen

Inline-elementen worden niet beïnvloed door de CSS properties: width/height (breedte/hoogte); die properties zijn bedoeld voor block-elementen. De width en height properties worden genegeerd voor inline elementen. In plaats daarvan kan je de regelafstand tussen inline elementen declareren met de CSS property "line-height".

De margin (kantlijn) en padding (opvulling) properties werken anders voor inline- dan voor block-elementen. In het algemeen is het beter om block-elementen te gebruiken als je lege ruimte tussen elementen wil creëren. Als je lege ruimte tussen elementen op één en dezelfde regel wil, dan zijn floating (drijvende) block-elementen voor jou de juiste keus. We komen hier later op terug.

Samenvatting

In dit hoofdstuk voerden we even kort het CSS box model in en besteedden vervolgens veel aandacht aan het verschil tussen inline- en block-elementen. We zullen later zien dat, hoewel elementen geboren worden als inline- of block-element, deze eigenschap gedurende hun leven veranderd kan worden. Dit wordt gedaan met de display property.

Wees niet bezorgd als je in bovenstaande discussie je niet helemaal vertrouwd voelde met begrippen als margin (kantlijn) en padding (vulling); ze zullen in volgende hoofdstukken helemaal uitgelegd worden.