CSS-boksstørrelse

Indholdsfortegnelse

CSS-boksstørrelse

CSS-egenskaben box-sizing giver os mulighed for at inkludere polstring og kant i et elements samlede bredde og højde.

Uden egenskaben med CSS-boksstørrelse

Som standard beregnes et elements bredde og højde således:

bredde + polstring + kant=faktisk bredde af et element
højde + polstring + kant=faktisk højde af et element

Det betyder: Når du indstiller bredden/højden af et element, dukker elementet ofte op større end du har indstillet (fordi elementets kant og polstring tilføjes til elementets angivne bredde/højde).

Den følgende illustration viser to <div>-elementer med det samme specificeret bredde og højde:

This div is smaller (width is 300px and height is 100px).

This div is bigger (width is also 300px and height is 100px).

De to <div> elementer ovenfor ender med forskellige størrelser i resultatet (fordi div2 har en polstring specificeret):

Eksempel

.div1 {
  width: 300px;
  height: 
100px;
  border: 1px solid blue; 
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style> 
.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.div2 {
  width: 300px;
  height: 100px;  
  padding: 50px;
  border: 1px solid red;
}
</style>
</head>
<body>

<h1>Without box-sizing</h1>

<div class="div1">This div is smaller (width is 300px and height is 100px).</div>
<br>
<div class="div2">This div is bigger (width is also 300px and height is 100px).</div>

</body>
</html>

Egenskaben box-sizing løser dette problem.

Med egenskaben i CSS-boksstørrelse

Egenskaben box-sizing giver os mulighed for at inkludere polstring og kant i et elements samlede bredde og højde.

Hvis du indstiller box-sizing: border-box; på et element, er polstring og kant inkluderet i bredden og højden:

Both divs are the same size now!

Hooray!

Her er det samme eksempel som ovenfor, med box-sizing: border-box; tilføjet til begge <div>-elementer:

Eksempel

.div1 {
  width: 300px;
  height: 
100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  
height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style> 
.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;  
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}
</style>
</head>
<body>

<h1>With box-sizing</h1>

<div class="div1">Both divs are the same size now!</div>
<br>
<div class="div2">Hooray!</div>

</body>
</html>

Da resultatet af at bruge box-sizing: border-box; er så meget bedre, ønsker mange udviklere, at alle elementer på deres sider skal fungere på denne måde.

Koden nedenfor sikrer, at alle elementer er dimensioneret på denne mere intuitive måde. Mange browsere bruger allerede box-sizing: border-box; til mange formularelementer (men ikke alle - hvilket er grunden til at input og tekstområder ser anderledes ud i bredden: 100%; ).

Det er sikkert og klogt at anvende dette på alle elementer:

Eksempel

* {
  box-sizing: border-box;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
}

* {
  box-sizing: border-box;
} 

input, textarea {
  width: 100%;
}
</style>
</head>
<body>

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br>
  Comments:<br>
  &lt;textarea name="message" rows="5" cols="30">
  &lt;/textarea>
  <br><br>
  <input type="submit" value="Submit">
</form> 

<p><strong>Tip:</strong> Try to remove the box-sizing property from the style element and look what happens.
Notice that the width of input, textarea, and submit button will go outside of the screen.</p>

</body>
</html>

CSS Box Sizing Ejendom

box-sizing: Definerer, hvordan bredden og højden af et element beregnes: bør de inkluderer polstring og kanter, eller ej