CSS Box modell


Innehållsförteckning

    Visa innehållsförteckning


Alla HTML-element kan betraktas som rutor.


CSS-boxmodellen

I CSS används termen "boxmodell" när man talar om design och layout.

CSS-boxmodellen är i huvudsak en ruta som omsluter varje HTML-element. Den består av: marginaler, kanter, stoppning och det faktiska innehållet. Bilden nedan illustrerar boxmodellen:

Förklaring av de olika delarna:

  • Innehåll - Innehållet i rutan, där text och bilder visas

  • Utfyllning - Rensar ett område runt innehållet. Vadderingen är genomskinlig

  • Border - En kant som går runt stoppningen och innehållet

  • Marginal - Rensar ett område utanför gränsen. Marginalen är transparent

Boxmodellen låter oss lägga till en ram runt element och definiera utrymme mellan elementen.

Exempel

Demonstration av boxmodellen:

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

Prova själv →

<!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>




Bredd och höjd på ett element

För att ställa in bredd och höjd på ett element korrekt i alla webbläsare behöver du veta hur boxmodellen fungerar.

Viktigt: När du ställer in egenskaperna för bredd och höjd för en element med CSS, ställer du bara in bredden och höjden på innehållsområdet. Till beräkna den fulla storleken på ett element måste du också lägga till utfyllnad, kanter och marginaler.

Exempel

Detta <div>-element kommer att ha en total bredd på 350px:

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

Prova själv →

<!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>


Här är beräkningen:

320px (bredd)
+ 20px (vänster + höger stoppning)
+ 10px (vänster + höger kant)
+ 0px (vänster + höger marginal)
= 350 pixlar

Den totala bredden på ett element ska beräknas så här:

Total elementbredd=bredd + vänster stoppning + höger stoppning + vänster kant + höger kant + vänster marginal + höger marginal

Den totala höjden av ett element bör beräknas så här:

Total elementhöjd=höjd + toppstoppning + bottenstoppning + topp kant + nedre kant + övre marginal + bottenmarginal

Obs! Margin-egenskapen påverkar också det totala utrymmet som rutan kommer att ta upp på sidan, men marginalen ingår inte i den faktiska storleken på lådan. Lådans totala bredd och höjd stannar vid kanten.