CSS Box Model

Indholdsfortegnelse

Alle HTML-elementer kan betragtes som bokse.

CSS Box Model

I CSS bruges begrebet "kassemodel", når man taler om design og layout.

CSS-boksmodellen er i bund og grund en boks, der omslutter hvert HTML-element. Det består af: marginer, kanter, polstring og det faktiske indhold. Billedet nedenfor illustrerer kassemodellen:

Forklaring af de forskellige dele:

Indhold - Indholdet af boksen, hvor tekst og billeder vises
Padding - Rydder et område omkring indholdet. Polstringen er gennemsigtig
Border - En kant, der går rundt om polstring og indhold
Margen - Rydder et område uden for grænsen. Marginen er gennemsigtig

Boksmodellen giver os mulighed for at tilføje en kant rundt om elementer og definere rum mellem elementer.

Eksempel

Demonstration af kassemodellen:

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>

Et elements bredde og højde

For at kunne indstille bredden og højden af et element korrekt i alle browsere, skal du vide, hvordan boksmodellen fungerer.

Vigtigt: Når du indstiller egenskaberne for bredde og højde for en element med CSS, indstiller du bare bredden og højden af indholdsområdet. Til beregne den fulde størrelse af et element, skal du også tilføje polstring, kanter og marginer.

Eksempel

Dette <div>-element vil have en samlet bredde på 350px:

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 320px;
  height: 50px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
</style>
</head>
<body>

<h2>Calculate the total width:</h2>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px. The total height of this element is 80px.</div>

</body>
</html>

Her er udregningen:

320px (bredde)
+ 20px (venstre + højre polstring)
+ 10px (venstre + højre kant)
+ 0px (venstre + højre margen)
= 350 pixels

Den samlede bredde af et element skal beregnes således:

Samlet elementbredde=bredde + venstre polstring + højre polstring + venstre kant + højre kant + venstre margen + højre margen

Den samlede højde af et element skal beregnes således:

Samlet elementhøjde=højde + toppolstring + bundpolstring + top kant + bundkant + topmargen + bundmargen

Bemærk: Egenskaben margin påvirker også den samlede plads, som boksen vil tage op på siden, men marginen er ikke inkluderet i den faktiske størrelse på kassen. Kassens samlede bredde og højde stopper ved kanten.