6 Boksmodellen

I dette kapitlet lager du en side for Dyrehjemmet Labben, der hvert dyr får sin egen boks. Lagre alt du lager i dette kapitlet i mappen kap06-boksmodell.

6.1 Alle elementer er bokser

dyrehjemmet.html
<style>
  div, span {
    background-color: #d8eadf;
  }
</style>
<h1>Dyrehjemmet Labben</h1>
<div>Bella, hund</div>
<div>Pusur, katt</div>
<p>Alle dyrene er <span>vaksinert</span> og <span>chippet</span>.</p>

Nettleseren tegner hvert element som en boks. Noen elementer er blokker, og andre er inline. <div> og <span> betyr ingenting i seg selv, og brukes når du trenger en boks å gi stil til.

Nettleser
  1. Les koden ovenfor, og sammenlign med resultatet. Hvordan ser du forskjellen på en blokk og et inline-element?
  2. Lag filen dyrehjemmet.html. Skriv en hel nettside med tittelen Dyrehjemmet Labben, og legg koden ovenfor inn i <head> og <body>. Hvor skal <style> stå?
  3. Gjør vinduet smalt og bredt. Hva skjer med bakgrunnsfargen på blokkene?
  4. Gi <h1>, <p> og <a> den samme bakgrunnsfargen. Hvilke er blokker, og hvilke er inline?
Blokker Inline
<h1>–<h6>, <p>, <ul>, <li>, <table>, <section>, <article>, <header>, <main>, <footer>, <div> <a>, <strong>, <em>, <abbr>, <span>, <img>

Med egenskapen display kan du endre om et element er en blokk eller inline.

  1. Legg til en <nav> med en lenkeliste over hunder, katter og kaniner øverst på siden, og regelen nedenfor. Hva skjer med lenkelista?
dyrehjemmet.html
nav li {
  display: inline;
}
  1. Endre inline til block, og deretter til none. Hva gjør hver av verdiene? Endre tilbake til inline.

display endrer bare hvordan elementet ser ut. Lenkelista er fortsatt en liste for en skjermleser.

6.2 Fyll og kant

dyrehjemmet.html
<style>
  article {
    padding: 1rem;
    border: 2px solid #2a6f4e;
    border-radius: 8px;
  }
</style>
<article>
  <h2>Bella</h2>
  <p>Hund, 3 år. Elsker lange turer og å bli klødd bak øret.</p>
</article>

Hver boks består av fire deler. Innerst er innholdet. Rundt innholdet er det fyll (padding), utenfor fyllet er kanten (border), og ytterst er margen (margin), som lager avstand til de andre boksene.

Nettleser
  1. Les koden ovenfor, og gjett hvordan artikkelen om Bella kommer til å se ut.
  2. Erstatt de to <div>-elementene med én <article> for Bella og én for Pusur, og legg til regelen i <style>.
  3. Endre padding: 1rem til padding: 0, og deretter til padding: 3rem. Hva skjer? Endre tilbake.
  4. Endre solid til dashed, og deretter til dotted. Endre tilbake.
  5. Endre border-radius: 8px til border-radius: 50px. Hva skjer?

padding kan ha én, to eller fire verdier.

Kode Betyr
padding: 1rem; 1rem på alle sider
padding: 0.5rem 1rem; 0.5rem over og under, 1rem til venstre og høyre
padding: 1rem 2rem 0 2rem; over, høyre, under og venstre, med klokka
  1. Gi artiklene padding: 0.5rem 2rem;. Stemmer det med tabellen?
  2. Du kan gi bare én side en kant. Gi <h2> en linje under seg med border-bottom: 1px solid #2a6f4e;.

border har tre verdier: tykkelse, type og farge. Glemmer du typen, for eksempel solid, blir det ingen kant.

6.3 Marg og sentrering

dyrehjemmet.html
article {
  margin: 1.5rem 0;
}

main {
  max-width: 40rem;
  margin: 0 auto;
}

Margen lager avstand mellom boksen og boksene rundt. Margen er alltid gjennomsiktig. Verdien auto betyr at nettleseren selv deler den ledige plassen. Når en blokk har en største bredde, og auto til venstre og høyre, havner den derfor midt på siden.

  1. Les koden ovenfor, og gjett hva hver av reglene gjør.
  2. Legg til deklarasjonen margin: 1.5rem 0; i regelen for article. Hva skjer med avstanden mellom artiklene?
  3. Legg artiklene inn i et <main>-element, og legg til regelen for main. Gjør vinduet bredt. Hvor havner dyrene?
  4. Endre margin: 0 auto til margin: 0. Hva skjer? Endre tilbake.

Tekst er lettest å lese når linjene ikke er for lange, omtrent 50 til 75 tegn. Derfor er det lurt å begrense bredden på hovedinnholdet.

Mange elementer har marg fra før, uten at du har skrevet noe CSS.

  1. Inspiser <body>, <h1> og <p>. I fanen Styles står det user agent stylesheet under regler som nettleseren har laget selv. Hvor mye marg har hvert av elementene?
  2. Legg til regelen body { margin: 0; }. Hva skjer? Hvorfor er siden nå litt vanskeligere å lese? Fjern regelen igjen.

6.4 Bredde og høyde

dyrehjemmet.html
.besok {
  width: 15rem;
  height: 6rem;
  padding: 1rem;
  border: 2px solid #2a6f4e;
}

Med width og height bestemmer du bredden og høyden på innholdet i en boks. Inline-elementer bryr seg ikke om width og height. Bruker du max-width i stedet for width, blir boksen smalere når det er lite plass, men aldri bredere enn verdien.

  1. Les koden ovenfor, og gjett hvordan en boks med klassen besok kommer til å se ut.
  2. Legg til en <div class="besok"> øverst i <main>, med teksten «Besøkstider: lørdag og søndag 12–15». Legg til regelen.
  3. Skriv så mye tekst i boksen at den ikke får plass. Hva skjer med teksten?
  4. Fjern height: 6rem. Hva skjer nå?

La som regel innholdet bestemme høyden. En boks med fast høyde kan få for mye tekst, for eksempel når brukeren har forstørret teksten.

  1. Endre width: 15rem til width: 50%. Gjør vinduet smalt og bredt. Hva betyr 50 prosent her?
  2. Endre width til max-width, og gjør vinduet veldig smalt. Hva er forskjellen?

6.5 Regne ut størrelsen på en boks

Kode A
.boks {
  width: 300px;
  padding: 20px;
  border: 5px solid;
}
Kode B
.boks {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid;
}

Vanligvis gjelder width bare innholdet. Fyll og kant kommer i tillegg. Med box-sizing: border-box gjelder width hele boksen, med fyll og kant.

Kode A Kode B
Innhold 300 px ?
Fyll, to sider 2 · 20 px = 40 px 40 px
Kant, to sider 2 · 5 px = 10 px 10 px
Hele boksen ? 300 px
  1. Regn ut hvor bred boksen blir med Kode A. Regn ut hvor bredt innholdet blir med Kode B.
  2. Lag filen regne-bredde.html med to <div>-elementer. Gi det ene stilen fra Kode A og det andre stilen fra Kode B. Bruk to ulike klasser.
  3. Inspiser boksene. I fanen Computed ser du en tegning av boksmodellen. Stemmer tallene med det du regnet ut?
  4. Gi begge boksene margin: 10px. Hvor mye plass tar hver av boksene totalt i bredden nå?

Mange begynner stilsettet med regelen * { box-sizing: border-box; }. Velgeren * gjelder for alle elementer. Da blir bredden på alle boksene den du skriver i width, også når de har fyll og kant.

  1. Legg til regelen * { box-sizing: border-box; } øverst i <style> i dyrehjemmet.html. Skjer det noe med boksen for besøkstider?

  2. Dyrehjemmet har sendt teksten om ukens dyr som ren tekst. Lag filen ukens-dyr.html, og kopier teksten inn i <body>. Merk opp teksten, og legg den i en <article>. Gi artikkelen fyll, kant, marg og en største bredde, slik at den ligner boksen nedenfor.

ukens-dyr.txt
Ukens dyr: Tassen

Tassen er en rolig katt på ni år som liker å ligge i vinduskarmen. Han er vant med barn, men vil helst være det eneste dyret i huset.

Alder: 9 år
Kjønn: hannkatt
Kastrert: ja
Pris: 1500 kr
Nettleser
Spør KI

Forklar boksmodellen i CSS med en sammenligning fra hverdagen. Bruk ordene innhold, fyll, kant og marg. Still meg deretter tre regneoppgaver om bredden på en boks, én om gangen.

6.6 Tabeller med luft og få streker

dyrehjemmet.html
table {
  border-collapse: collapse;
  border-top: 2px solid #2b2d42;
  border-bottom: 2px solid #2b2d42;
  font-variant-numeric: tabular-nums;
}

thead {
  border-bottom: 1px solid #2b2d42;
}

th, td {
  padding: 0.3rem 1.5rem 0.3rem 0;
  text-align: left;
}

.pris {
  text-align: right;
}

Flere streker gjør ikke en tabell lettere å lese. Ofte holder det med tre streker, luft mellom kolonnene og tall som står til høyre.

  1. Les koden ovenfor, og gjett hvor strekene havner.
  2. Lag en tabell med tittelen «Pris for å adoptere». Hund koster 2500 kroner, katt 1500 kroner og kanin 500 kroner. Bruk <thead>, <tbody> og <th>. Gi overskriftscellen og cellene med priser klassen pris.
  3. Legg til reglene ovenfor. Hvordan ser tabellen ut nå?
  4. Fjern border-collapse: collapse. Hva skjer med strekene? Legg det til igjen.
  5. Fjern font-variant-numeric: tabular-nums fra regelen for tabellen. Se nøye på tallene. Hva gjorde deklarasjonen?

Nedenfor ser du den samme tabellen med to ulike stilsett.

Tabell A
Tabell B
  1. Hvilken av tabellene er lettest å lese? Hvilke streker og farger i Tabell A kan du fjerne uten at det blir vanskeligere å finne prisen for en kanin?
  2. Gi alle cellene i tabellen din border: 1px solid #9cc5ae;. Blir tabellen lettere å lese? Fjern regelen igjen.
  3. Gi <caption> en regel, slik at tabelltittelen står til venstre og blir litt større.

Hver strek, farge og ramme i en tabell skal ha en jobb. Spør deg selv om tabellen blir vanskeligere å lese hvis du fjerner den. Blir den ikke det, kan du fjerne den. Har tabellen mange rader, kan litt ekstra luft for hver femte rad hjelpe øyet mer enn striper.

6.7 Feilsøke boksmodellen

dyrehjemmet.html
* {
  outline: 1px solid red;
}

Når en boks blir for stor, for liten eller havner på feil sted, er det lurt å se alle boksene på siden. Egenskapen outline tegner en strek rundt boksen, uten å gjøre den større. Velgeren * gjelder for alle elementer.

  1. Les koden ovenfor, og gjett hvordan siden kommer til å se ut.
  2. Legg til regelen øverst i <style>. Hvilke bokser ligger inne i hvilke?
  3. Fjern regelen igjen. Hold musepekeren over et element i fanen Elements i utviklerverktøyene. Hvilke farger får innholdet, fyllet og margen på siden?
  4. Gi en artikkel width: 100%, og fjern * { box-sizing: border-box; }. Gjør vinduet smalt. Kan siden rulles sidelengs nå? Forklar hvorfor ved hjelp av fanen Computed.
  5. Legg tilbake box-sizing-regelen, og sjekk at feilen er borte.

Ser du avstand du ikke har laget selv, er det ofte margen som nettleseren gir elementer som <body>, <h1>, <p> og <ul>. Inspiser elementet, og se etter user agent stylesheet.

Spør KI

En boks på nettsiden min blir bredere enn jeg vil. Her er CSS-regelen: [lim inn regelen]. Ikke rett den for meg. Forklar hvordan jeg kan bruke fanen Computed i utviklerverktøyene til å finne ut hvorfor.

Oppsummering

I dette kapitlet har du lært at alle elementer er bokser, og at hver boks har innhold, fyll, kant og marg. Du har sentrert hovedinnholdet, regnet ut størrelsen på bokser, gitt en tabell luft og noen få streker, og feilsøkt boksmodellen med utviklerverktøyene.

Boksmodellen

dyrehjemmet.html
* {
  box-sizing: border-box;
}

article {
  padding: 1rem;
  border: 2px solid #2a6f4e;
  border-radius: 8px;
  margin: 1.5rem 0;
}

main {
  max-width: 40rem;
  margin: 0 auto;
}
Nettleser
Egenskap Hva den gjør
display gjør et element til en blokk, inline eller usynlig
padding lager luft mellom innholdet og kanten
border tegner en kant rundt boksen: tykkelse, type og farge
border-radius gir boksen runde hjørner
margin lager avstand til de andre boksene
margin: 0 auto sentrerer en blokk som har en største bredde
width, max-width, height bestemmer størrelsen på innholdet
box-sizing: border-box tar med fyll og kant i bredden
outline tegner en strek rundt boksen uten å endre størrelsen

Merk deg følgende:

  • Blokker begynner på en ny linje. Inline-elementer legger seg etter hverandre.
  • Uten box-sizing: border-box er boksen bredere enn width.
  • En tabell trenger bare tre streker: over overskriftene, under overskriftene og nederst. Tall står til høyre.

Oppgaver

Oppgave 6.1

oppg1-rett-feil.html
article {
  padding: 10;
  border: 2px #2a6f4e;
  margin: 1rem 0
  border-radius: 8px;
}

Koden ovenfor har tre feil. Lag filen oppg1-rett-feil.html med en artikkel og regelen i et <style>-element, og rett feilene.

Oppgave 6.2

  • border-left: 6px solid #2a6f4e;
  • .info {
  • }
  • padding: 0.5rem 1rem;
  • background-color: #d8eadf;

Sett sammen kodelinjene til en regel for en boks med viktig informasjon i filen oppg2-info.html. Bruk boksen til å fortelle at dyrehjemmet er stengt i påsken.

Oppgave 6.3

En <section> har width: 400px, padding: 10px, border: 3px solid og margin: 20px. Hvor bred blir boksen med og uten box-sizing: border-box? Hvor mye plass tar den totalt i bredden, når margen er med?

Oppgave 6.4

Nettleser

Lag boksen ovenfor så likt som du klarer, i filen oppg4-melding.html.

Oppgave 6.5

Forklar forskjellen på en blokk og et inline-element. Gi tre eksempler på hver.

B-oppgaver

Oppgave 6.6

Lag filen oppg6-fire-bokser.html med fire <section>-elementer som har ulike verdier for padding, border og margin. Bruk utviklerverktøyene til å forklare hvorfor boksene får den størrelsen de får.

Oppgave 6.7

Kopier mappen klubb fra kapittel 5 over til mappen kap06-boksmodell. Gi nettstedet luft og kanter. Hovedinnholdet skal være sentrert med en største bredde, og tabellen skal ha luft og bare de strekene den trenger.

Oppgave 6.8

Lag et visittkort for deg selv i filen oppg8-visittkort.html. Kortet skal være sentrert, ha en største bredde på 20rem, runde hjørner, en kant og fyll. Det skal inneholde navnet ditt i en overskrift, et bilde og en lenke til e-postadressen din.

Oppgave 6.9

Gi to avsnitt over hverandre margin: 2rem 0. Hvor stor blir avstanden mellom dem? Undersøk hva margin collapsing er, og lag tre eksempler i filen oppg9-marg.html som viser når det skjer og når det ikke skjer.