Margin

Je kent waarschijnlijk het begrip margins ("kantlijnen") uit je tekstverwerking app, bijvoorbeeld Microsoft Word, waar je kan instellen hoe hoog en breed de margins moeten zijn. De margins zijn de blanco ruimtes gemeten van de vier (boven, rechts, onder, links) randen van de pagina tot aan de inhoud van de pagina. Margins in CSS lijken hier veel op, ze zijn de blanco ruimte rond de HTML elementen. Anders gezegd, de margin is een onzichtbare grenslaag rondom je element. Je kan de afstanden tussen HTML elementen instellen door values toe te kennen aan hun property 'margin' .

De standaard value voor de margin property is "auto", wat vaak een grootte van nul betekent. De meeste browsers geven sommige speciale elementen een standaard value van een paar pixels, maar dat kan je overschrijven als je wil. Bekende voorbeelden zijn de header (h1-h6), de body, en de paragraph elementen. Het interne CSS stijlblad van veel browsers geeft een (kleine) waarde aan de margins van deze elementen. Daarom zie je vaak in stijlbladen een expliciete declaratie van 0 voor de margins van sommige van deze properties, daarmee overschrijven ze de margin value van de browser (denk eraan: de laatste declaratie telt!)

Je kan de margins van een element declareren met een of meer van de volgende vier margin-x properties: margin-top, margin-right, margin-bottom and margin-left. Hier komt een voorbeeld:

<style type="text/css">
.box {
	background-color: DarkSeaGreen;
	width: 100px;
	height: 100px;
	margin-top: 10px;
	margin-right: 5px;
	margin-bottom: 10px;
	margin-left: 5px;
}
</style>

<div class="box">
	Box
</div>

De verkorte versie van de margin property

Er is niets tegen het gebruik van de margin-x properties (x is top, right, bottom, of left), maar je doet dan wel teveel werk, want er bestaat een verkorte versie, simpelweg margin genaamd. Hiermee kan je margin groottes voor de vier zijden van je element declareren zonder dat je vier keer 'margin-' hoeft te herhalen. Je kan van één value (voor alle margins) tot vier values (voor iedere margin afzonderlijk declareren). Binnen de CSS syntaxis is vastgelegd in welke volgorde een value toegekend wordt aan de zijdes .

Als alle vier de margins dezelfde grootte hebben hoef je maar één numerieke value te declareren; deze wordt toegepast op alle vier. Als je top (bovenkant) en bottom (onderkant) margin dezelfde afmeting hebben en de left (linker) en right (rechter) margin ook, dan hoef je maar twee values te specificeren, de eerste voor de top/bottom en de tweede voor de left/right margin. Raak je in de war? Geen nood, hier komt een voorbeeld van de besproken mogelijkheden.

<style type="text/css">
.box {
	background-color: DarkSeaGreen;
	width: 100px;
	height: 100px;
}
</style>

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

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

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

Het eerste voorbeeld was het langst en naar beneden toe werden we beknopter. In alle drie de gevallen kreeg de div aan alle kanten een margin van 10px.

Wat is de volgorde van de numerieke values toegekend aan de margin? De volgende regels gelden:

4 values:

1. [top margin] (bovenkant)
2. [right margin] (rechterkant)
3. [bottom margin] (onderkant)
4. [left margin] (linkerkant)

3 values (wordt niet vaak gebruikt):

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

2 values:

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

1 value:

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

Relatieve grootte van margins

Heel vaak worden de groottes van margins uitgedrukt in absolute lengte eenheden (meestal pixels, zoals in het vorige voorbeeld). Maar net als voor andere CSS properties die een afmeting definiëren, kan de grootte van een margin ook uitgedrukt worden in relatieve eenheden. Vaak wordt de relatieve eenheid em gebruikt (1 em is gelijk aan de breedte van de hoofdletter M in het huidige font). Vaak wordt ook een percentage opgegeven (meestal is dit percentage gerelateerd aan de widths van de parents van de geselecteerde elementen).

In het volgende voorbeeld worden voor drie boxes (div's) dezelfde margins van 1em gedeclareerd. Elk van de drie boxes krijgt een eigen font-grootte (ook in em eenheden, maar voor dit voorbeeld hadden de font-groottes ook in absolute eenheden gedefinieerd mogen zijn).

<style type="text/css">
.box {
	background-color: DarkSeaGreen;
	width: 100px;
	height: 100px;
	margin: 1em;
}
</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>

Als je dit voorbeeld uitprobeert dan zie je dat de drie boxen respectievelijk 1, 2 en 3em van de linkerkant af verwijderd zijn. Dit laat zien dat de linker-margin (evenals de andere drie margins) evenredig met de font-grootte groeit. Dit is handig als je CSS code moet kunnen werken op windows van allerlei afmetingen.

Negatieve margins

Tot nu toe hebben we alleen positieve numerieke waarden toegekend aan de groottes van de margins. Je kan echter ook negatieve waarden toekennen, wat handig is als je block-type HTML elementen dichter op elkaar wil positioneren. Ook kan je het effect van te veel padding (opvulling) compenseren. We hebben padding nog niet in detail besproken, maar zie het in het volgende voorbeeld maar als een margin van 10px aan de vier binnenzijdes van een block.

Hier komt een voorbeeld van padding:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	padding: 10px;
	background-color: DarkSeaGreen;
}

.box-header {
	background-color: CornflowerBlue;
}
</style>

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

Dit is een gebruikelijke situatie: een box die duidelijk afgetekend is door zijn background-color (achtergrond kleur) met wat tekst erin. Bovenin staat een header (hoofdje) uitgelicht door een andere achtergrondkleur. De padding zorgt ervoor dat de tekst niet tegen de randen van de box aanleunt. Zo'n box kan je her en der gebruiken (met verschillende teksten).

Maar die gekleurde padding rond de header is niet mooi, het is mooier als in plaats daarvan de achtergrondkleur van de header zich uitstrekt tot de randen van de box. Ook is het mooier als er wat extra ruimte onder de header is. We voeren daarom de class ".box-header" in die we toepassen op de header. De margin property in deze class maakt drie van de vier .box paddings ongedaan en definieert een bottom margin van 10px. De declaratie "padding: 5px 10px;" (5px boven/onder, 10px links/rechts) zet de header tekst op dezelfde afstand van de linkerkant van de box als de andere tekst, maar in een blauw veld. Onder de header is een ruimte van 15px (10px margin en 5px padding).

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	padding: 10px;
	background-color: DarkSeaGreen;
}

.box-header {
	background-color: CornflowerBlue;
	margin: -10px -10px 10px -10px;
	padding: 5px 10px;
}
</style>

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

Dus we gebruikten een combinaties van negatieve en positieve margin values om voor de paddings in de parent te compenseren. We definieerden een padding voor het kind (child) om zijn positie in de box aan te passen.

Samenvatting

Margins worden gebruikt om lege ruimte te creëren tussen de elementen. Dit helpt bij designs die oogstrelend ruimtelijk zijn. Sommige elementen komen met ingebouwde groottes van margins (gewoonlijk afkomstig van de browser), maar het is niet verboden om ze aan te passen, je kan ze vergroten, verkleinen, negatief maken, of op nul zetten.

Margin groottes worden gedefinieerd in absolute eenheden, zoals pixels, of in relatieve eenheden (zoals percentages). Beide kunnen positief of negatief zijn om een element weg te duwen of naderbij te brengen.