Websites met stijl

Naslag: Margin

Op dit naslagblad

Eigenschap margin

De eigenschap margin bepaalt afmetingen van de marge.

Zie ook: box-model, padding, border.

Gedrag

standaardmargin: 0;
negatieve waardentoegestaan (elementen kunnen zo overelkaar schuiven)
vererftnee

Vorm

A Standaardvorm - 4 attributen

margin: boven rechts onder links; voorbeeld 1: margin: 10px 5px 0 8px; Marge boven 10px, rechts 5px, onder 0, links 8px.

B Met 3 attributen

Als de marge links even groot is als rechts mag de marge links worden weggelaten margin: boven rechts onder; voorbeeld 2: margin: 10px 5px 0;
Marge boven 10px, links en rechts 5px, onder 0.

C Met 2 attributen

Als marge links = marge rechts en marge boven = marge onder, kan volstaan worden met twee attributen: margin: boven rechts; voorbeeld 3: margin: 10px 5px; Marge boven- en onder: 10px; marge links en rechts: 5px

D Met 1 attribuut

Als alle marges (boven, rechts, onder, links) even groot zijn hoeft maar één waarde opgegeven: margin: waarde; voorbeeld 4: margin: 10px; Een marge van 10px in alle richtingen.

Opmerking:

Je mag altijd de vorm met 4 attributen gebruiken. De voorbeelden 2 t/m 4 kunnen dus ook zó worden geschreven:

margin: 10px 5px 0;is hetzelfde alsmargin: 10px 5px 0 5px;
margin: 10px 5px;is hetzelfde alsmargin: 10px 5px 10px 5px;
margin: 10px;is hetzelfde alsmargin: 10px 10px 10px 10px;

E Afzonderlijke zijden

Je kan ook de marges van boven, rechts, onder en links afzonderlijk opgeven: voorbeeld 5 margin-top: 10px;
margin-right: 5px;
margin-bottom: 0;
margin-left: 8px
Voorbeeld 5 zet dezelfde marges als voorbeeld 1.
Afzonderlijke marges worden voornamelijk gebruikt als je maar voor één of twee zijden de marges wilt zetten.

Inherit en Initial

margin: inherit; De marges van de parent worden overgenomen

margin: initial; De marges krijgen de standaard waarden.

Eenheden

De meest gebruikte eenheden zijn:

pxbeeldpunten (pixels)
%Als percentage van het omvattende element
autoautomatisch: zie hieronder bij een element horiozontaal centreren.
Voor meer mogelijkheden: zie bij eenheden

Een element horizontaal centreren

Een blok element dat niet de hele breedte van de parent in beslag neemt kan worden gecentreerd door de linker en rechter marge op auto te zetten. Voorbeeld: div.midden {
width: 300px;
margin: 10px auto;
}
Het division-element van de class midden heeft een breedte van 300px, een boven- en ondermarge van 10px en een linker- en rechtermarge auto.
Door de waarde auto wordt het element horizontaal gecentreerd.