CSS rammodellen

CSS rammodellen

All HTML elements can be considered as boxes. In CSS, when discussing design and layout, the term 'box model' or 'frame model' is used.

CSS-rammodellen är i grunden en ram som omger varje HTML-element. Den inkluderar: marginaler, kanter, innerspalt och det faktiska innehållet. Bilden nedan visar rammodellen:

CSS rammodellen

Förklaringar för olika delar:

  • Innehåll - Ramens innehåll, där text och bilder visas.
  • Innerspalt - Rensa området runt innehållet. Innerspalt är genomskinlig.
  • Kanter - Kanterna runt innerspalt och innehållet.
  • Marginaler - Rensa området utanför kanterna. Marginalerna är genomskinliga.

Rammodellen låter oss lägga till kanter runt element och definiera utrymmet mellan element.

Det innersta området i elementramen är det faktiska innehållet, som omedelbart omger innehållet är innerspalt. Innerspalt visar elementets bakgrund. Kanternas kant är kanterna. Utanför kanterna är marginalerna, marginalerna är som standard genomskinliga och kommer inte att förhindra att andra element bakom dem visas.

Tips:Bakgrund tillämpas på området som består av innehåll, innerspalt och kanter.

Innerspalt, kanter och marginaler är valfria, standardvärdet är noll. Men många element kommer att ha marginaler och innerspalt satta av användaragentens stilark. Dessa webbläsarstilar kan åtgärdas genom att sätta elements marginaler och innerspalt till noll. Detta kan göras separata, eller använda en allmän väljare för att ställa in alla element:

* {
  margin: 0;
  innerspalt: 0;
}

I CSS betyder width och height innehållsområdets bredd och höjd. Ökning av innerspalt, kanter och marginaler påverkar inte storleken på innehållsområdet, men ökar elementramens totala storlek.

Anta att varje sida av ramen har 10 pixlar marginal och 5 pixlar innerspalt. Om du vill att denna elementram ska nå 100 pixlar, måste du ställa in bredden på innehållet till 70 pixlar, se bilden nedan:

CSS rammodellexempel 
#box {
  bredd: 70px;
  marginal: 10px;
  innerspalt: 5px;
}

Tips:Innerspalt, kanter och marginaler kan tillämpas på alla sidor av ett element eller endast på enskilda sidor.

Tips:Marginaler kan vara negativa och används ofta med negativa marginaler.

Exempel

Demonstration av rammodellen:

div {
  bredd: 300px;
  kanter: 15px solid green;
  innerspalt: 50px;
  marginal: 20px;
}

Try it yourself

Elementets bredd och höjd

För att korrekt ställa in bredden och höjden på elementet i alla webbläsare behöver du förstå hur rammodellen fungerar.

Viktigt tips:När du använder CSS för att ställa in bredden och höjden på ett element, behöver du bara ställa in bredden och höjden på innehållsområdet. För att beräkna elementets totala storlek måste du också lägga till innermarginaler, kanter och marginaler.

Exempel

<div> Elementets totala bredd kommer att vara 350px:

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

Try it yourself

Calculation as follows:

320px (width)
+ 20px (left + right inner padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of the element should be calculated as follows:

Total width of element = width + left inner padding + right inner padding + left border + right border + left margin + right margin

The total height of the element should be calculated as follows:

Total height of element = height + top inner padding + bottom inner padding + top border + bottom border + top margin + bottom margin