CSS Box Model

Obsah

    Zobrazit obsah

Všechny prvky HTML lze považovat za krabice.

Model CSS Box

V CSS se termín "box model" používá, když se mluví o designu a rozložení.

CSS box model je v podstatě box, který obklopuje každý HTML element. Skládá se z: okrajů, okrajů, odsazení a skutečného obsahu. Obrázek níže ilustruje model krabice:

Vysvětlení jednotlivých částí:

  • Obsah - Obsah pole, ve kterém se zobrazuje text a obrázky

  • Odsazení - Vymaže oblast kolem obsahu. Polstrování je průhledné

  • Ohraničení - Ohraničení, které obepíná výplň a obsah

  • Okraj - Vymaže oblast mimo hranice. Marže je průhledný

Krabicový model nám umožňuje přidat ohraničení kolem prvků a definovat prostor mezi prvky.

Příklad

Ukázka modelu krabice:

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

Zkuste to sami →

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

Šířka a výška prvku

Aby bylo možné správně nastavit šířku a výšku prvku ve všech prohlížečích, musíte vědět, jak funguje model krabice.

Důležité: Když nastavíte vlastnosti width a height an pomocí CSS, stačí nastavit šířku a výšku oblasti obsahu. Na vypočítat plnou velikost prvku, musíte také přidat odsazení, okraje a okraje.

Příklad

Tento prvek <div> bude mít celkovou šířku 350 pixelů:

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

Zkuste to sami →

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

Zde je výpočet:

320 pixelů (šířka)
+ 20 pixelů (levé + pravé odsazení)
+ 10 pixelů (levý + pravý okraj)
+ 0px (levý + pravý okraj)
= 350 pixelů

Celková šířka prvku by se měla vypočítat takto:

Celková šířka prvku=šířka + výplň vlevo + výplň vpravo + vlevo ohraničení + pravý okraj + levý okraj + pravý okraj

Celková výška prvku by se měla vypočítat takto:

Celková výška prvku=výška + horní výplň + spodní výplň + horní část okraj + spodní okraj + horní okraj + spodní okraj

Poznámka: Vlastnost margin také ovlivňuje celkový prostor v rámečku zabere na stránce, ale okraj není zahrnut ve skutečné velikosti krabice. Celková šířka a výška rámečku se zastaví na okraji.