CSS Margins

In deze tutorial leer je hoe je de ruimte rond een element aanpast met behulp van CSS.

---

---

CSS margin eigenschap

De margin eigenschap kan worden gebruikt om de ruimte vast te leggen tussen de rand (border) van een element en de rand van het aangrenzend element. Met CSS heb je volledige controle over de margins. Er zijn eigenschappen voor het instellen van de margin voor elke zijde van een element (boven, rechts, onder en links).

De margin van een element wordt niet beïnvloed door de achtergrondkleur, deze is altijd transparant. Als het aangrenzend element echter een achtergrondkleur heeft, is het zichtbaar door het margin gebied.

Afzonderlijke zijden

Je kunt de margin voor afzonderlijke zijden van een element instellen, zoals de bovenzijde, rechterzijde, onderzijde, en linkerzijde door gebruik te maken van de CSS-eigenschappen margin-top, margin-right, margin-bottom en margin-left.

De marge-eigenschappen kunnen worden opgegeven met behulp van de volgende waarden:

length	-	geeft een marge aan in px, em, rem, pt, cm, etc.
%	-	geeft een marge aan in percentage (%) van de breedte van het bevattende element.
auto	-	de browser berekent een geschikte marge om te gebruiken.
inherit	-	geeft aan dat de marge moet worden overgenomen van het bovenliggende element.

Je kunt ook negatieve marges opgeven, bijvoorbeeld marge: -10px; marge: -5%; etc.

Margin shorthand

Om de code in te korten, is het mogelijk om alle margin eigenschappen in één eigenschap op te geven.

De margin eigenschap is een verkorte eigenschap om te voorkomen dat de marge van elke zijde afzonderlijk wordt ingesteld, d.w.z. margin-top, margin-right, margin-bottom en margin-left.

Zo ziet de verkorte code eruit:

margin: 40px 130px 80px 20px;

Is het zelfde als:

margin-top: 40px;
margin-right: 130px;  
margin-bottom: 80px;
margin-left: 20px;

De verkorte code kan één, twee, drie of vier door spaties gescheiden waarden aannemen:

Als er één waarde is opgegeven, wordt deze op alle vier de zijden toegepast.

div { margin: 40px; }

Voorbeeld

Als er twee waarden zijn opgegeven, wordt de eerste waarde toegepast op de boven en onderkant en wordt de tweede waarde toegepast op de rechter en linkerkant van het vak van het element.

div { margin: 40px 130px; }

Voorbeeld

Als er drie waarden zijn opgegeven, wordt de eerste waarde toegepast op de bovenkant, de tweede waarde op de rechter en linkerkant en de laatste waarde op de onderkant.

div { margin: 40px 130px 80px; }

Voorbeeld

Als er vier waarden zijn opgegeven, worden deze toegepast op de boven, rechter, onder en linkerkant van het elementvak in de opgegeven volgorde.

div { margin: 40px 130px 80px 20px; }

Voorbeeld

Het wordt aanbevolen om de shorthand eigenschappen te gebruiken, het zal je helpen tijd te besparen door het extra typen te vermijden en zo kun je je CSS-code overzichtelijker houden.

Horizontaal centreren

De waarde auto voor de margin eigenschap vertelt de webbrowser om automatisch de marge te berekenen. Dit wordt vaak gebruikt om een element horizontaal in een grotere container te centreren. Het element neemt dan de opgegeven breedte in beslag en de resterende ruimte wordt gelijkelijk verdeeld tussen de linker- en rechtermarge.

---

---