CSS-handboka. Boksmodellen

Når vi skal plassere html-elementa er det enklaste er å tenke seg at alle elementa er sette inne i ein boks. Det er også slik utviklarane av stilarket har tenkt. Dei ulike eigenskapane i kommandoen verkar då på ulike område av boksen eller rundt boksen.

<p>Ein <em>kursivert</em> tekst</p>

I tillegg kan ein også tenke seg at området mellom <p> og <em> er ein boks og området mellom </em> og </p> ein annan boks. Dette er såkalla anonyme boksar. Strengt tatt ikkje boksar, men det kan vere greitt å ha dei i tankane når vi skriv stilarket.

Anonyme blokkboksar

Dei anonyme boksane kan spele oss eit puss av og til dersom vi ikkje tenkjer oss om. I html-koden

<div>
Litt tekst
<p>Litt meir tekst</p>
</div>

er «Litt tekst» eigentleg eit inline-element i blokk-boksen definert med <div>. Teksten «Litt meir tekst» er derimot ei blokk. (p-taggen har eit linjeskift etter seg). Ein blokkboks som inneheld både ein inline-boks og ein blokk-boks vil handtere begge boksane som blokkar. Dette kan visast slik:

Med dette i tankane skulle risikoen for å bli lurt av merkverdige og uforståande formateringar bli noe redusert --- håpar eg.

Bare for å vere sikker. Studer eksemplet nedanfor. Dei nødvendige tekstane er lagt inn i dei ulike boksane.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
<TITLE>Anonym tekst avbrote av ei blokk</TITLE>
<STYLE type="text/css">

body { display: inline }

          p { display: block }

        </style>



        </HEAD>

        <BODY>

          Dette er ein anonym tekst framføre p-taggen.

          <P>Dette er innhaldet i p-taggen.</P>

  Dette er ein anonym tekst etter
        p-taggen.

        </BODY>

Utskrifta er ikkje overveldande, men det kan du finne ut av ved å prøve programmet.

Dei anonyme boksane vil hente eigenskapane sine frå foreldreboksen, eller frå normalinnstillingane dersom eigenskapen ikkje kan arvast. I eksemplet heilt øvst på sida vil dei anonyme boksane («Ein» og «tekst») inne i p-taggen arve skriftfargen frå p-taggen medan bakgrunnen er gjennomsiktig.

Boksen

Normalt blir ein boks plassert på skjermen i høve til andre boksar eller i høve til foreldreboksen. Når du skriv rein html-kode, veit du at p-taggane blir plasserte under kvarandre langs venstre marg, dersom ikkje anna er bestemt. I CSS tenker ein seg <body> - </body> som éin boks og alle <p> - </p> som andre boksar inne i body-boksen. Dermed veit du også noe anna viktig om boksane: Plasseringa blir bestemt av foreldreboksen, men ikkje avgrensa av denne. Skjermsida di utvidar seg etter kvart som du føyer til nye element.

Marg

Margane er det ledige rommet rundt eit html-element. Margane er fullstendig gjennomsiktige. Verdiane som blir sette for eigenskapen marg bestemme kor langt inn på sidene elementet (boksen) skal plasserast, eller kor langt det skal vere opp eller ned til neste elementet.

Vi kan bruke alle dei vanlege måleeiningane (px, em, %). I tillegg også verdien auto. Auto er normalverdien, og treng difor ikkje brukast utanom for å tilbakestille tidlegare sette verdiar.

Margin-funksjonen kan vere litt vanskelegare i bruk enn det kan sjå ut til. Margane blir nemleg målt frå dei omkringliggande skjermelementa. Dette betyr at vi må halde styr på kva element som omsluttar det elementet vi har definert. Dersom vi f. eks. definerer ein boks med toppmarg 20px, vil denne avstanden bli målt frå næraste ovanforliggande skjermelement. Inne i sida vil dette ofte vere ei tekstlinje.

Venstresida av boksen blir plassert 60 pikslar inn frå den gjeldande venstremargen på sida. Den øvre margen blir målt frå tekstlinja over. Tekstlinja under boksen hamnar 10 pikslar nedanfor boksen. Eit eventuelt element til høgre for boksen vil hamne 20 pikslar mot høgre.

Dersom den ytste ramma er <body>-taggen, vil margane sjølvsagt referere til kantane på skjermsida eller eventuelle mellomliggjande skjermelement. Høgre- og venstremargen vil alltid vere gyldig, medan topp- og botnmargane kan overskrivast dersom dei er for tronge. Margane kan også ha negative verdiar. Dette betyr at du t.d. kan overlappe to element.

Dette er ein tekst i den ytre ramma. (Margane som definerte ovanfor).

For denne ramma er margin-left: 50px. Dei andre margane er sett til 10px.
Legg merke til at den øvre margen blir målt frå tekstlinja.
Sidan høgde og breidde ikkje er definert, vil rammene tilpasse seg teksten.

Dersom du definerer høgde og breidde for ei ramme og teksten ikkje får plass innføre ramma, vil teksten halde fram under ramma. Det kan då vere litt vanskeleg å halde styr på layouten.

Den delen av teksten som fell utanom ramma tel ikkje med når nettlesaren skal halde orden på tekstlinjene eller andre plasseringar på skjermen. Difor har eg sett inn eit ekstra linjeskift under boksen for å gjere teksten leseleg.

Dette er den ytre ramma.

Den indre ramma
margin-left: -50px. Dei andre margane er sett til 10px.

Padding

Du har kanskje irritert deg over at teksten kjem så nær ramma i eksempla ovanfor. Fortvil ikkje. Stilarket har ei løysing for utfylling også.

På same måten som du kan bruke margin til å bestemme breidda på margane rundt eit html-element, kan du også bestemme avstanden frå ytterkantane av eit element til innhaldet i elementet ved å bruke eigenskapen padding.

Properties (eigenskapar), verdiar og bruksmåte er nokså likt det du fann i margin.

Breidde og høgde

Det kan vere verd å merke seg at dersom du har definert breidda eller høgda på elementet, gjeld dette for innhaldsområdet (content i boksen øvst på sida). Dersom elementet også inneheld padding, border og/eller margin, må du legge til desse for å finne den totale plassen elementet tar opp på sida.

Ei rute definert med breidde 15em og padding-left: 4em, vil såleis få ei totalbreidde på 19em. Det same gjeld for dei andre padding-eigenskapane. Er margane i tillegg definert til 2em, vil den totale breidda vere 15em + 4em + 2em + 2em = 23em. (Hugs at det er marg på begge sider).

Menyen:

Boksmodellen

Anonyme blokkboksar

Boksen

Marg

Padding

Breidde og høgde

Ramme