CSS -marges
Marges worden gebruikt om ruimte rond elementen te creëren, buiten de gedefinieerde randen.
CSS-marges
De CSS margin-eigenschappen worden gebruikt om ruimte rond elementen te creëren, buiten de gedefinieerde randen.
Met CSS heb je volledige controle over de marges. Er zijn eigenschappen voor het instellen van de marge voor elke zijde van een element (boven, rechts, onder en links).
Marge - individuele zijden
CSS heeft eigenschappen voor het specificeren van de marge voor elke zijde van een element:
margin-topmargin-rightmargin-bottommargin-left
Alle marge-eigenschappen kunnen de volgende waarden hebben:
- auto - de browser berekent de marge
- lengte - specificeert een marge in px, pt, cm, etc.
- % - specificeert een marge in % van de breedte van het bevattende element
- erven - geeft aan dat de marge moet worden overgenomen van het bovenliggende element
Tip: Negatieve waarden zijn toegestaan.
Voorbeeld
Stel verschillende marges in voor alle vier de zijden van een <p> element:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Marge - steno-eigenschap
Om de code in te korten, is het mogelijk om alle marge-eigenschappen in één eigenschap op te geven.
De margineigenschap is een verkorte eigenschap voor de volgende individuele marge-eigenschappen:
margin-topmargin-rightmargin-bottommargin-left
Dus, hier is hoe het werkt:
Als de margineigenschap vier waarden heeft:
- marge: 25px 50px 75px 100px;
- bovenmarge is 25px
- rechtermarge is 50px
- ondermarge is 75px
- linkermarge is 100px
Voorbeeld
Gebruik de steno-eigenschap marge met vier waarden:
p {
margin: 25px 50px 75px 100px;
}
Als de margineigenschap drie waarden heeft:
- marge: 25px 50px 75px;
- bovenmarge is 25px
- rechter- en linkermarges zijn 50px
- ondermarge is 75px
Voorbeeld
Gebruik de steno-eigenschap voor marge met drie waarden:
p {
margin: 25px 50px 75px;
}
Als de margineigenschap twee waarden heeft:
- marge: 25px 50px;
- boven- en ondermarges zijn 25px
- rechter- en linkermarges zijn 50px
Voorbeeld
Gebruik de steno-eigenschap voor marge met twee waarden:
p {
margin: 25px 50px;
}
Als de marginwoning één waarde heeft:
- marge: 25px;
- alle vier de marges zijn 25px
Voorbeeld
Gebruik de steno-eigenschap voor marge met één waarde:
p {
margin: 25px;
}
De automatische waarde
U kunt de marge-eigenschap instellen op autoom het element horizontaal in de container te centreren.
Het element neemt dan de opgegeven breedte in beslag en de resterende ruimte wordt gelijkelijk verdeeld tussen de linker- en rechtermarge.
Voorbeeld
Gebruik marge: auto:
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
De erven Waarde
In dit voorbeeld kan de linkermarge van het <p class="ex1">-element worden overgenomen van het bovenliggende element (<div>):
Voorbeeld
Gebruik van de overervingswaarde:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}