Velikost CSS boxu

Obsah

Velikost CSS boxu

Vlastnost CSS box-sizing nám umožňuje zahrnout odsazení a ohraničení celkovou šířku a výšku prvku.

Bez vlastnosti CSS box-sizing

Ve výchozím nastavení se šířka a výška prvku vypočítá takto:

šířka + výplň + okraj=skutečná šířka prvku
výška + výplň + okraj=skutečná výška prvku

To znamená: Když nastavíte šířku/výšku prvku, prvek se často objeví větší, než jste nastavili (protože okraj a výplň prvku jsou přidány k zadané šířce/výšce prvku).

Následující obrázek ukazuje dva prvky <div> se stejným specifikovaná šířka a výška:

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

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

Dva výše uvedené prvky <div> mají ve výsledku různé velikosti (protože div2 má výplň specifikováno):

Příklad

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

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

Zkuste to sami →

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

Vlastnost box-sizing řeší tento problém.

S vlastností CSS box-sizing

Vlastnost box-sizing nám umožňuje zahrnout odsazení a ohraničení do celkové šířky a výšky prvku.

Pokud u prvku nastavíte box-sizing: border-box;, budou do šířky a výšky zahrnuty odsazení a ohraničení:

Both divs are the same size now!

Hooray!

Zde je stejný příklad jako výše, s box-sizing: border-box; přidáno do obou prvků <div>:

Příklad

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

Zkuste to sami →

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

Protože výsledek použití box-sizing: border-box; je mnohem lepší, mnoho vývojářů chce, aby všechny prvky na jejich stránkách fungovaly tímto způsobem.

Níže uvedený kód zajišťuje, že všechny prvky jsou dimenzovány tímto intuitivnějším způsobem. Mnoho prohlížečů již používá box-sizing: border-box; pro mnoho prvků formuláře (ale ne všechny - proto vstupy a textové oblasti vypadají jinak na šířku: 100 %; ).

Použití tohoto na všechny prvky je bezpečné a moudré:

Příklad

* {
  box-sizing: border-box;
}

Zkuste to sami →

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

Vlastnost CSS Box Sizing

box-sizing: Definuje, jak se vypočítá šířka a výška prvku: should zahrnují výplň a okraje, nebo ne