Lektion 10: Boks modellen - margin & padding
I forrige lektion fik du en introduktion til boks modellen i CSS. I denne lektion kigger vi nærmere på hvordan man ved at sætte margin og padding kan ændre på margener og fyld for et element.
Sæt margen på et element
Et element har 4 sider: højre, venstre, top og bund. Margenen er afstanden fra hver side til nabo-elementet (eller dokumentets grænser). Se iøvrigt figuren i lektion 9 for yderligere beskrivelse.
Som det første eksempel vil vi kigge på hvordan man definerer margener for selve dokumentet, det vil sige for elementet <body>. Figuren nedenfor viser hvordan vi ønsker margenerne på vores sider skal være.
Ovenstående kan kodes på følgende måde:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
Eller man kunne vælge den lidt mere elegante sammenskrivning:
body {
margin: 100px 40px 10px 70px;
}
På samme måde kan man sætte margener på stort set ethvert element. Med udgangspunkt i ovenstående eksempel kan vi f.eks. vælge at definere margener for alle vores tekstafsnit markeret med <p>:
body {
margin: 100px 40px 10px 70px;
}
p {
margin: 5px 50px 5px 50px;
}
Sæt padding på et element
Padding kan vel bedst oversættes til dansk som "fyld" - og det giver da også mening, idet padding ikke påvirker elementets afstand til øvrige elementeter - men udelukkende definerer den indre afstand mellem elementets grænse og indhold.
Benyttelsen kan f.eks. illustrueres ved at kigge på et simpelt eksempel hvor alle overskrifter har fået en baggrundsfarve:
h1 {
background: yellow;
}
h2 {
background: orange;
}
Ved at definere padding for overskrifterne ændres på hvor meget "fyld" der skal være rundt om teksten i hver overskrift:
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
Browser-kompatibelitet
Stort set alle browsere understøtter det du lige har lært. Hvis du er i tvivl kan prøve dig frem, eller referere til nedenstående tabel:
| Element | Netscape | Internet Explorer |
|---|---|---|
| margin | 4.0 | 4.0 |
| padding | 4.0 | 4.0 |
Tabellen viser fra og med hvilken version browseren understøtter den pågældende egenskab.
Opsummering
Du er allerede nu godt på vej til at mestre boks modellen i CSS. I næste lektion kigger vi nærmere på hvordan man sætter kanter i forskellige farver og former på sine elementer.
