het boxmodel

Block elementen die worden gebruikt in html maken gebruik van het zogenaamde boxmodel. Met dit boxmodel kunnen een aantal zaken bepaald worden met behulp van CSS. Naast block elementen kunnen er ook nog inline elementen zijn. Deze hebben wat minder mogelijkheden. Aan de andere kant kun je, mocht dat nodig zijn, van een block element een inline element maken en van een inline element kun je een block element maken. Voorbeeld van een block element is de veelgebruikte ‘div’. Voorbeeld van een inline element is ‘span’.

Margin, padding en border

Welke zaken kun je nu bepalen voor het block element. Een block element bestaat uit het element zelf, daarom heen bevindt zich het opvulgebied wat ‘padding’ genoemd wordt, daarna krijg je een rand, border genoemd. Vervolgens is er om de rand heen een marge gebied, wat ‘margin’ genoemd wordt. In een plaatje ziet dat er als volgt uit:

De uitwerking

Padding is de ruimte tussen het element en de border. Je kunt de ruimte boven, onder, links en rechts van het element. Dat geldt ook voor de border, deze kun je boven, onder, links en rechts, onafhankelijk van elkaar aanpassen. Datzelfde geldt voor de margin. Wanneer je dus de bovenzijde van een element groter wilt maken binnen de border dan kies je bijvoorbeeld voor de volgende oplossing:

<p style="border: 1px solid black; padding-top 20px;">
een element met een padding aan de bovenkant van 10 pixels</p>

Dit is dan het resultaat:

een element met een padding aan de bovenkant van 20 pixels
Op deze manier kun je alle zijden aanpassen, zoals beschreven binnen en buiten de border.

De border

Voor de border zijn er 10 stijlen, hier volgt een opsomming: dotted, dashed, solid, double, groove, ridge, inset, outset, none en hidden. Hoe deze 10 stijlen er uitzien kun je lezen in een artikel over borders.