Dit tutorial zal gaan over twee dingen: buitenmarges en buitenranden.
Laten we beginnen met de buitenmarges. Voor een p-element dat rechtstreeks binnen body is gedefinieerd, verwijzen de opgaven voor de linker- en rechtermarge naar de afstand tot de buitenranden van het body-element. Als er meerdere alinea's onder elkaar volgen, verwijzen de opgaven voor de boven- en ondermarge naar de afstand tussen de individuele alinea's.
Bij het definiëren van de buitenmarges en -randen zijn overigens ook negatieve waarden mogelijk, waardoor overlappingen kunnen worden bereikt.
De buitenmarge instellen
Buitenrand en marge zijn de opgelegde lege ruimte tussen het huidige element en zijn ouder- of naburelement. Nuttige CSS-eigenschappen zijn onder andere van toepassing op HTML-elementen die een eigen alinea creëren of een blok vormen.
Voor margin gaat het om de verkorte vorm van de vier eigenschappen margin-top, margin-right, margin-bottom en margin-left. De volgende waarden zijn mogelijk:
• auto – de buitenmarge wordt automatisch berekend.
• Percentage - betrekking hebbend op het element waarvoor de marge is opgegeven.
• Lengte – negatieve waarden zijn ook toegestaan. Hierdoor kunnen elementen elkaar overlappen.
Er kunnen tot vier waarden worden gebruikt:
• één waarde – boven, onder, links en rechts
• twee waarden - eerste waarde voor boven- en ondermarge, tweede waarde voor rechts en links
• drie waarden - eerste waarde voor de bovenmarge, tweede waarde voor de linkermarge en rechtermarge, derde waarde voor de ondermarge
• vier waarden - eerste waarde voor de bovenmarge, tweede voor rechts, derde voor onder en vierde voor links.
Het volgende voorbeeld toont het gebruik van algemene margin-eigenschappen:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
background-color: yellow;
}
p.ex {
margin: 30px 50px 30px 50px;
background-color:#FF99FF;
</style>
</head>
<body>
<p>Camera-rig opbouwen</p>
<p class="ex">In deze videotraining leer je hoe je een camera-rig opzet en deze veilig door de 3D-ruimte verplaatst. Er is een projectbestand bijgevoegd.</p>
</body>
</html>
In dit voorbeeld zijn twee alinea's gedefinieerd.
Aan de tweede alinea zijn ook marges toegewezen.
margin: 30px 50px 30px 50px;
Deze specificatie betekent het volgende:
• 30 pixels afstand naar boven
• 50 pixels afstand naar rechts
• 30 pixels afstand naar beneden
• 50 pixels afstand naar links
Individuele specificaties voor de marges
Eerder werd de algemene margin-specificatie gepresenteerd. Je kunt echter ook individuele specificaties maken. Over de volgende eigenschappen kun je de afstand naar boven, links, beneden of rechts van de verschillende zijranden van een element bepalen.
• margin-top – buitenrand/afstand bovenaan
• margin-right – buitenrand/afstand rechts
• margin-bottom – buitenrand/afstand onderaan
• margin-left – buitenrand/afstand links
Voor alle vier de eigenschappen kunnen de volgende waarden worden gebruikt:
• auto – de buitenmarge wordt automatisch berekend.
• Percentage - betrekking hebbend op het element waarvoor margin- [top, right, bottom, left] is opgegeven.
• Lengte – negatieve waarden zijn ook toegestaan. Hierdoor kunnen elementen elkaar overlappen.
Het volgende voorbeeld laat zien hoe de individuele specificaties effectief kunnen worden gebruikt.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
</style>
</head>
<body>
<p>Camera-rig opbouwen</p>
<p class="ex">In deze videotraining leer je hoe je een camera-rig opzet en deze veilig door de 3D-ruimte verplaatst. Er is een projectbestand bijgevoegd.</p>
</body>
</html>
In de browser ziet het resultaat er als volgt uit:
De binnenvulling instellen
Bij de binnenafstand gaat het om de opgelegde lege ruimte tussen de inhoud van het element en de eigen elementrand. Nuttige CSS-eigenschappen zijn onder andere van toepassing op HTML-elementen die een eigen alinea creëren of een blok vormen.
Bij padding gaat het om de verkorte vorm van de vier eigenschappen padding-top, padding-right, padding-bottom en padding-left. Hiermee kan de breedte tussen het kader en de inhoud van een element, dus de binnenafstand, worden gedefinieerd.
• Percentage - betrekking hebbend op het ouder element.
• Lengte
Er kunnen elk vier waarden worden opgegeven:
• één waarde – binnenafstand boven, onder, links en rechts
• twee waarden - eerste waarde voor binnenafstand boven en onder, tweede waarde voor binnenafstand rechts en links
• drie waarden - eerste waarde voor binnenafstand boven, tweede waarde voor de binnenafstand links en rechts, derde waarde voor de binnenafstand onderaan
• vier waarden - eerste waarde voor binnenafstand boven, de tweede voor rechts, de derde voor onder en de vierde voor links.
Hier volgt nog een voorbeeld:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;}
p.ex {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<p>Camera-rig opbouwen</p>
<p class="ex">In deze videotraining leer je hoe je een camera-rig maakt en veilig door de 3D-ruimte beweegt. Er is een projectbestand bijgevoegd.</p>
</body>
</html>En ook hier het resultaat in de browser:
Met de vier padding-eigenschappen kun je de binnenmarges definiëren. De volgende vier CSS-eigenschappen zijn hiervoor beschikbaar:
• padding-top – Afstand tussen de bovenrand van de inhoud en de bovenrand
• padding-bottom – Afstand tussen de onderkant van de inhoud en de onderrand
• padding-left – Afstand tussen de linkerrand van de inhoud en de linkerrand
• padding-right – Afstand tussen de rechterrand van de inhoud en de rechterrand.
Bij al deze vier eigenschappen kunnen de volgende waarden gebruikt worden:
• Percentage - verwijst naar het ouderen element
• Lengteopgave
