CSS ramme model

CSS ramme model

Alle HTML-elementer kan betragtes som firkantede. I CSS bruges termerne “box model” eller “boksmodel” når der tales om design og layout.

CSS boksmodellen er i sandhed en ramme, der omgiver hver HTML-element. Den inkluderer: margener, kanter, indrykning og det faktiske indhold. Billedet nedenfor viser boksmodellen:

CSS ramme model

Forklaring af forskellige dele:

  • Indhold - Indholdet af rammen, hvor der vises tekst og billeder.
  • Indrykning - Fjern området omkring indholdet. Indrykning er gennemsigtig.
  • Kanter - Omkring indrykning og indholdets kant.
  • Margener - Fjern området uden for kanterne. Margener er gennemsigtige.

Boksmodellen muliggør, at vi tilføjer kanter omkring elementer og definerer mellemrummet mellem elementer.

Det indreste område af elementrammen er det faktiske indhold, det der omgiver indholdet er indrykning. Indrykning præsenterer elementets baggrund. Kanternes kant er kant. Kanterne uden for er margener, som standard er gennemsigtige og vil ikke blokere nogen elementer bag dem.

Tip:Baggrund anvendes på området bestående af indhold, indrykning og kant.

Indrykning, kant og margin er valgfri, standardværdien er nul. Men mange elementer vil blive sat af brugergrænsefladeskabelonen. Du kan over rides disse browserstilarter ved at sætte elementets margin og padding til nul. Dette kan gøres separat eller ved at bruge en universal vælger til at sætte alle elementer:

* {
  margin: 0;
  padding: 0;
}

I CSS betyder width og height indholdets bredde og højde. Tilføjelse af indrykning, kant og margin påvirker ikke indholdets størrelse, men øger elementrammens samlede størrelse.

Antag, at hver kant af rammen har 10 pixels margin og 5 pixels indrykning. Hvis du ønsker, at denne elementramme skal nå 100 pixels, skal du sætte indholdets bredde til 70 pixels, se billedet nedenfor:

CSS ramme model eksempel 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

Tip:Indrykning, kant og margin kan anvendes på alle kanter af et element, eller kun på enkelte kanter.

Tip:Margener kan være negative, og i mange tilfælde skal du bruge negative margener.

Eksempel

Demonstration af boksmodellen:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Prøv det selv

Elements bredde og højde

For at korrekt indstille elementets bredde og højde i alle browsere, skal du forstå hvordan boksmodellen fungerer.

Vigtig advarsel:Når du bruger CSS til at sætte elementets width og height-attributter, skal du kun indstille indholdets bredde og højde. For at beregne elementets fulde størrelse skal du også tilføje indrykning, kant og margin.

Eksempel

<div> Elementets samlede bredde vil være 350px:

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0; 
}

Prøv det selv

Beregningsmetoden er som følger:

320px (bredde)
+ 20px (venstre + højre indre margin)
+ 10px (venstre + højre kant)
+ 0px (venstre + højre ekstern margin)
= 350px

Elementets samlede bredde skal beregnes som følger:

Elementets samlede bredde = bredde + venstre indre margin + højre indre margin + venstre kant + højre kant + venstre ekstern margin + højre ekstern margin

Elementets samlede højde skal beregnes som følger:

Elementets samlede højde = højde + øverste indre margin + nederste indre margin + øverste kant + nederste kant + øverste ekstern margin + nederste ekstern margin