Lektion 9: Boks modellen
Boks modellen i CSS beskriver de bokse som genereres for et HTML-element. Boks modellen indeholder også detaljerede muligheder for at indstille margener, kanter og fyld for hvert element. Nedenstående figur viser skematisk hvordan boksmodellen er bygget op:
Boks modellen i CSS
Ovenstående model er jo ret teoretisk at se på - derfor vil vi prøve at overføre modellen på et konkret tilfælde med en overskrift og noget tekst, koden for vores eksempel er:
<h1>Det Digitale Danmark</h1> <p>Netværkssamfundet ændrer den måde, vi producerer på, organiserer os på og lever på. Det giver os nye muligheder for at kommunikere, handle og lære. Og det byder på nye udfordringer.</p>
Hvilket med lidt farver, fonte og boks modellen f.eks. kunne præsenteres sådan her:
Vores eksempel indeholder 2 elementer: <h1> og <p>. Boksmodellen kan således illustrueres for de to elementer på følgende måde:
Selvom det naturligvis ser lidt kompliceret ud, viser figuren meget godt hvordan hvert HTML-element er omgivet af bokse, som vi med CSS kan indstille på.
Egenskaberne som regulerer de forskellige bokse er: padding, margin og border. De næste tre lektioner omhandler netop disse tre egenskaber:
Når du har gennemgået disse tre lektioner vil du beherske boks modellen, og dermed være istand til at layoute dine dokumenter meget mere præcist og elegant end du nogensinde vil kunne med tabeller og lignende i HTML.
