Padding

In een eerder hoofdstuk hebben we het gehad over margins, de extra laag blanco ruimte aan de buitenkant van een HTML element. Padding (opvulling) is net zoiets, maar dan aan de binnenkant. Met andere woorden, padding is een onzichtbare laag aan de binnenkant van de vier randen van je element.

Standaard hebben de meeste block elementen een padding laag van dikte nul, met het gevolg dat tekst en andere inhoud de randen raken. Als het element zichtbare randen heeft, ziet dat er in het algemeen lelijk uit.

<style type="text/css">
.box {
	border: 2px solid CadetBlue;
	background-color: Gainsboro;
}
</style>

<div class="box">
	Hello, world!
</div>

In dit voorbeeld zie je dat de letter "H" zeer dicht aan de rand staat. Er is nog de standaard letter-spacing (letter spatiëring) die zorgt voor een kleine afstand. Maar mooi is het niet. Je zou het op kunnen lossen door de tekst in een block element met margins te plaatsen, maar dat is een heel gedoe. In plaats daarvan kan je de box (div) van padding voorzien - dat wil zeggen, je bekleedt de binnenkant met een onzichtbare laag. De kinderen (inhoud) van de div worden door de padding van de randen weg gehouden. Dit kan rand voor rand gedaan worden met één of meer van de properties padding-top, padding-right, padding-bottom en padding-left (zoals steeds met de klok mee van bovenkant, rechter zijkant, onderkant naar linker zijkant).

<style type="text/css">
.box {
	border: 2px solid CadetBlue;
	background-color: Gainsboro;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
</style>

<div class="box">
	Hello, world!
</div>

Je ziet dat de paddings een meer esthetische ruimte van de tekst tot de randen van de box creëren.

Gebruik van de verkorte naam padding

Net als voor margin-x properties de verkorte naam margin bestaat, bestaat voor padding-x (x is top, right, bottom, left) de verkorte naam padding. Met deze ene naam kan je de vier zijdes van een box van paddings met verschillende diktes voorzien. De vier lengte values die je toekent aan de property padding geven de diktes van respectievelijk: de bovenkant, rechter zijkant, onderkant en linker zijkant. Je ziet dat de CSS syntaxis je alweer de mogelijkheid geeft je code flink te bekorten.

De padding property kan gedeclareerd worden met één tot en met vier values. Als je één value toekent, geef je alle randen een padding van dezelfde dikte. Je kan ook twee, drie of vier values toekennen. In de tabel, die na het volgende voorbeeld komt, vind je alle mogelijkheden samengevat. In het volgende voorbeeld illustreren we drie van de vier mogelijkheden:

<style type="text/css">
.box {
	border: 2px solid CadetBlue;
	background-color: Gainsboro;
	width: 100px;
	height: 100px;
	margin: 10px;
}
</style>

<div class="box" style="padding: 10px 10px 10px 10px;">
	Box
</div>

<div class="box" style="padding: 10px 10px;">
	Box
</div>

<div class="box" style="padding: 10px;">
	Box
</div>

In alle drie de gevallen krijgen de vier zijden een padding van dikte 10px, terwijl we van boven naar beneden 4, 2 en 1 values toegekend hebben.

In welke volgorde moeten de diktes gegeven worden? En wat gebeurt er in de verschillende gevallen? Hier volgt een overzicht van de regels:

4 values:

1. [top padding]
2. [right padding]
3. [bottom padding]
4. [left padding]

3 values (niet vaak toegepast):

1. [top padding]
2. [left/right padding]
3. [bottom padding]

2 values:

1. [top/bottom padding]
2. [left/right padding]

1 value:

1. [top/right/bottom/left padding]

Relatieve padding diktes

Vaak worden padding diktes in absolute lengte eenheden gegeven (meestal pixels zoals in de voorbeelden tot nu toe). Net als de meeste andere elementen die een grootte hebben kan je de afmetingen ook in relatieve eenheden toekennen. Een voorbeeld van een relatieve eenheid is de em unit (1 em is de grootte van het huidige font), of je kan eenvoudig weg een percentage geven.

In het volgende voorbeeld hebben alle paddings een dikte van 1em, maar door verschillende font-sizes (font groottes) te specificeren worden de paddings effectief toch dikker (en daarmee de boxen groter):

<style type="text/css">
.box {
	border: 2px solid CadetBlue;
	background-color: Gainsboro;
	width: 100px;
	height: 100px;
	padding: 1em;
	margin: 10px;
}
</style>

<div class="box" style="font-size: 1em;">
	Box
</div>

<div class="box" style="font-size: 2em;">
	Box
</div>

<div class="box" style="font-size: 3em;">
	Box
</div>

Het kan in veel situaties heel handig zijn dat de padding mee schaalt met de font grootte!

Samenvatting

Padding doet voor de binnenkant van een element wat margin voor de buitenkant doet: beide creëren extra blanco ruimte. Tussen de margin en de padding bevindt zich de border (rand), die het onderwerp was van het vorige hoofdstuk. Terwijl de border vaak zichtbaar is, zijn noch de margin noch de padding dat.

Tenslotte is er nog een heel belangrijk ding om te onthouden: padding vergroot de afmetingen van je element. Als je element geen vaste afmetingen heeft, dan heb je hier in feite niets mee te maken. Maar als je een grootte gedefinieerd hebt van, zeg, 100px x 100px, en je voegt een 10px padding toe aan alle vier de zijdes, dan wordt je element plotseling 120px x 120px. Dus als je element een specifieke afmeting moet hebben en je wil ook nog padding toevoegen, dan moet je hier rekening mee houden bij het vaststellen je width en height properties.