De margineigenschap definieert het buitenste gedeelte van het doosmodel en creëert ruimte rond een element, buiten de gedefinieerde randen.
Marges worden ingesteld met behulp van lengtes, percentages of het trefwoord autoen kunnen negatieve waarden hebben. Hier is een voorbeeld:
.box ( margin: 0 3em 0 3em; )margin is een afgekorte eigenschap en accepteert maximaal vier waarden, die hier worden weergegeven:
.box ( margin: || || || )Als er minder dan vier waarden zijn ingesteld, wordt aangenomen dat de ontbrekende waarden zijn gebaseerd op de waarden die zijn gedefinieerd. De volgende twee regelsets zouden bijvoorbeeld identieke resultaten opleveren:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Als er dus maar één waarde is gedefinieerd, worden alle vier de marges op dezelfde waarde ingesteld. Als er drie waarden worden gedeclareerd, is dat het geval margin: (top) (left-and-right) (bottom);.
Elk van de individuele marges kan met de hand worden gedeclareerd, in welk geval u slechts één waarde per eigenschap zou definiëren:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto en centreren
Elk van de marge-eigenschappen kan ook een waarde accepteren van auto. Een waarde van autovertelt de browser in feite om de marge voor u te definiëren. In de meeste gevallen zal een waarde van autogelijk zijn aan een waarde van 0(wat de beginwaarde is voor elke marge-eigenschap) of anders de beschikbare ruimte aan die kant van het element. Echter, autois handig voor horizontale centrering:
.container ( width: 980px; margin: 0 auto; )In dit voorbeeld worden twee dingen gedaan om dit element horizontaal in de beschikbare ruimte te centreren:
- Het element krijgt een bepaalde breedte
- De linker- en rechtermarge zijn ingesteld op
auto
Zonder de opgegeven breedte zouden de autowaarden in wezen geen effect hebben, waarbij de linker- en rechtermarges worden ingesteld op 0of anders op de beschikbare ruimte binnen het bovenliggende element.
Er moet ook op worden gewezen dat dit autoalleen nuttig is voor horizontaal centreren, en dat het gebruik autovoor boven- en ondermarges een element dus niet verticaal centreert, wat verwarrend kan zijn voor beginners.
Instortende marges
Verticale marges op verschillende elementen die elkaar raken (en dus geen inhoud, opvulling of randen hebben die ze van elkaar scheiden) vallen in elkaar en vormen een enkele marge die gelijk is aan de grootste van de aangrenzende marges. Dit gebeurt niet op horizontale marges (links en rechts), alleen verticaal (boven en onder).
Neem ter illustratie de volgende HTML:
Collapsing Margins
Example text.En de volgende CSS:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )In dit voorbeeld krijgt het h2element een ondermarge van 20px. Het alinea-element, dat er onmiddellijk op volgt in de bron, heeft een bovenmarge ingesteld op 10px.
Gezond verstand lijkt te suggereren dat de dikte van de verticale marge tussen de h2en de alinea in totaal 30px (20px + 10px) zou zijn. Maar vanwege het instorten van de marge, wordt de werkelijke dikte 20 px. Dit wordt gedemonstreerd in de ingebouwde pen hieronder:
Hoewel instortende marges op het eerste gezicht misschien niet intuïtief lijken, zijn ze om een aantal redenen nuttig. Ten eerste voorkomen ze dat lege elementen extra, meestal ongewenste, verticale marge-ruimte toevoegen.
Ten tweede zorgen ze voor een meer consistente benadering voor het declareren van universele marges over pagina-elementen. Koppen hebben bijvoorbeeld gewoonlijk ruimte in de verticale marge, evenals alinea's. Als de marges niet instortten, zouden koppen die op alinea's volgen (of omgekeerd) vaak de marges op een van de elementen opnieuw moeten instellen om een consistente hoeveelheid verticale afstand te bereiken.
Ten derde is het samenvouwen van de marge ook van toepassing op geneste elementen. Kijk naar de volgende pen:
Hier heeft het alinea-element een bovenmarge die is ingesteld op 30 px, en is het genest in een divelement met een bovenmarge van 40 px. Bovendien heeft het h2element een ondermarge van 20px.
Nogmaals, gezond verstand zou suggereren dat de totale ruimte in de verticale marge hier 90px (20px + 40px + 30px) zou zijn, maar in plaats daarvan vallen de marges allemaal samen in een enkele marge van 40px (de hoogste van de drie). Dit is in de meeste gevallen handig omdat het niet nodig is om de bovenmarges opnieuw te definiëren om de extra verticale ruimte te verwijderen.
Negatieve marges
Zoals je misschien vermoedt, terwijl een positieve margewaarde andere elementen wegduwt, zal een negatieve marge het element zelf in die richting trekken of andere elementen ernaartoe trekken.
Hier is een voorbeeld van een container met opvulling, en de header h2 heeft negatieve marges die zichzelf door die opvulling naar de randen trekken:
Zie de Pen
Most Common Use Case voor negatieve marges door Chris Coyier (@chriscoyier)
op CodePen.
Hier is een voorbeeld waarbij de eerste alinea een negatieve ondermarge heeft, waardoor de volgende alinea omhoog wordt getrokken.
Zie de
paragraaf Negatieve marge van pen trekken aan de onderkant door Chris Coyier (@chriscoyier)
op CodePen.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Werken | Werken | Werken | Werken | Werken | Werken | Werken |
IE6 is gevoelig voor de verdubbelde float-margin-bug, die in de meeste gevallen kan worden opgelost door toe display: inlinete voegen aan het float- element.