CSS-laatikon koko

Sisällysluettelo

CSS-laatikon koko

CSS:n box-sizing-ominaisuuden avulla voimme sisällyttää täytteen ja reunuksen elementin kokonaisleveys ja korkeus.

Ilman CSS-laatikon koko-ominaisuutta

Oletuksena elementin leveys ja korkeus lasketaan seuraavasti:

leveys + täyte + reuna=elementin todellinen leveys
korkeus + täyte + reuna=elementin todellinen korkeus

Tämä tarkoittaa: Kun asetat elementin leveyden/korkeuden, elementti tulee usein näkyviin suurempi kuin olet asettanut (koska elementin reuna ja täyte lisätään elementin määritettyyn leveyteen/korkeuteen).

Seuraavassa kuvassa on kaksi <div>-elementtiä, joilla on sama määritetty leveys ja korkeus:

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

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

Kaksi yllä olevaa <div>-elementtiä päätyvät tulokseen eri kokoisiin (koska div2:ssa on täyte määritelty):

Esimerkki

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

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

Kokeile itse →

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

Ominaisuus box-sizing ratkaisee Tämä ongelma.

CSS-laatikon kokoominaisuuden avulla

box-sizing-ominaisuuden avulla voimme sisällyttää täytteen ja reunuksen elementin kokonaisleveyteen ja -korkeuteen.

Jos määrität elementille box-sizing: border-box;, täyte ja reunus sisällytetään leveyteen ja korkeuteen:

Both divs are the same size now!

Hooray!

Tässä on sama esimerkki kuin yllä, box-sizing: border-box; lisätty molempiin <div>-elementteihin:

Esimerkki

.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;
}

Kokeile itse →

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

Koska box-sizing: border-box;-komennon tulos on paljon parempi, monet kehittäjät haluavat kaikkien sivujen elementtien toimivan tällä tavalla.

Alla oleva koodi varmistaa, että kaikki elementit on mitoitettu tällä intuitiivisemmalla tavalla. Monet selaimet käyttävät jo box-sizing: border-box; monille lomakeelementeille (mutta ei kaikille - minkä vuoksi syötteet ja tekstialueet näyttävät erilaisilta leveydeltään: 100 %; ).

Tämän soveltaminen kaikkiin elementteihin on turvallista ja viisasta:

Esimerkki

* {
  box-sizing: border-box;
}

Kokeile itse →

<!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-laatikon koon ominaisuus

box-sizing: Määrittää kuinka elementin leveys ja korkeus lasketaan: should ne sisältävät pehmusteen ja reunat tai eivät