Dette tutorial vil handle om to ting: Ydre margener og ydre rammer.
Vi begynder med ydre margener. For et p-element, der er direkte defineret inden i body, betyder angivelser af venstre og højre vindueskant afstanden til yderranden af body-elementet. Hvis der følger flere afsnit efter hinanden, angiver top- og bundmargenerne afstanden mellem de enkelte afsnit.
Ved definitionen af ydre margener og rammer er det i øvrigt også muligt med negative værdier, hvilket kan skabe overlapninger.
At fastsætte ydre margin
Margin og afstand er den påtvungne tomrum mellem det aktuelle element og dets forældre- eller nabo-element. Følgende CSS-egenskaber er nyttige i HTML-elementer, der genererer en ny afsnit eller danner en blok.
I margin er den korte form for de fire egenskaber margin-top, margin-right, margin-bottom og margin-left. Følgende værdier er mulige:
• auto – ydre margen beregnes automatisk.
• Procentværdi – refererer til det element, som margin er angivet for.
• Længdeværdi – negative værdier er tilladt. Dette kan overlappe elementer.
Der kan gives op til fire værdier:
• én værdi – ydre margin øverst, nederst, venstre og højre
• to værdier – første værdi for ydre margin øverst og nederst, anden værdi for ydre margin højre og venstre
• tre værdier – første værdi for ydre margin øverst, anden værdi for ydre margin venstre og højre, tredje værdi for ydre margin nederst
• fire værdier – første værdi for ydre margin øverst, anden for højre, tredje nederst, fjerde venstre.
Følgende eksempel viser brugen af de generelle margin-egenskaber:
<!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>Oprette et kamera-rig</p>
<p class="ex">I denne video-træning lærer du, hvordan du opretter et kamera-rig og sikkert flytter det gennem det 3D-rum. En projektfil følger med.</p>
</body>
</html>
I dette eksempel er der defineret to tekstafsnit.
Derudover blev der tildelt margener til det andet afsnit.
margin: 30px 50px 30px 50px;
Dette angiver følgende:
• 30 pixels afstand øverst
• 50 pixels afstand til højre
• 30 pixels afstand nederst
• 50 pixels afstand til venstre
Enkeltangivelser for margenerne
Tidligere blev den generelle margin-angivelse præsenteret. Men du kan også lave enkeltangivelser. Gennem følgende egenskaber kan afstanden øverst, til venstre, nederst eller til højre for et element bestemmes.
• margin-top – ydre margin/afstand øverst
• margin-right – ydre margin/afstand til højre
• margin-bottom – ydre margin/afstand nederst
• margin-left – ydre margin/afstand til venstre
For alle fire egenskaber kan følgende værdier anvendes:
• auto – ydre margin beregnes automatisk.
• Procentværdi – refererer til det element, som margin-[top, right, bottom, left] er angivet for.
• Længdeværdi – negative værdier er tilladt. Dette kan overlappe elementer.
Følgende eksempel viser, hvordan enkeltangivelserne kan bruges effektivt.
<!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>Oprette et kamera-rig</p>
<p class="ex">I denne video-træning lærer du, hvordan du opretter et kamera-rig og sikkert flytter det gennem det 3D-rum. En projektfil følger med.</p>
</body>
</html>
I browseren ser resultatet sådan ud:
At fastsætte indre margin
Den indre margin er det påtvungne tomrum mellem elementets indhold og dets egne elementkant. Følgende CSS-egenskaber er nyttige i HTML-elementer, der genererer en ny afsnit eller danner en blok.
I padding er den korte form for de fire egenskaber padding-top, padding-right, padding-bottom og padding-left. Her kan bredden mellem rammen og indholdet af et element defineres, altså den indre margin.
• Procentværdi – refererer til forældreelementet.
• Længdeværdi
Der kan angives op til fire værdier i hver:
• én værdi – indre margin øverst, nederst, venstre og højre
• to værdier – første værdi for indre margin øverst og nederst, anden værdi for indre margin højre og venstre
• tre værdier – første værdi for indre margin øverst, anden værdi for indre margin venstre og højre, tredje værdi for indre margin nederst
• fire værdier – første værdi for indre margin øverst, anden for højre, tredje nederst, fjerde venstre.
Her er et andet eksempel:
<!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>Opret kamera-rig</p>
<p class="ex">I denne video-træning lærer du, hvordan du opretter et kamera-rig og flytter det sikkert gennem 3D-rummet. En projektfil er inkluderet.</p>
</body>
</html>Og her er også resultatet i browseren:
Med de fire padding-egenskaber kan du definere indvendige afstande. Følgende fire CSS-egenskaber er tilgængelige til dette formål:
• padding-top – Afstand mellem indholdets øverste kant og den øverste kant
• padding-bottom – Afstand mellem indholdets nederste kant og den nederste kant
• padding-left – Afstand mellem indholdets venstre kant og den venstre kant
• padding-right – Afstand mellem indholdets højre kant og den højre kant.
Alle fire egenskaber kan bruge følgende værdier:
• Procentdel – refererer til det overordnede element
• Længdeangivelse
