Velikost CSS boxu

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

Bez vlastnosti CSS box-sizing

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

width + padding + border = skutečná šířka prvku
výška + padding + border = skutečná výška prvku

To znamená: Když nastavíte šířku/výšku prvku, prvek se často jeví větší, než jste nastavili (protože ohraničení prvku a odsazení se přidají k zadané šířce/výšce prvku).

Následující obrázek ukazuje dva prvky <div> se stejnou zadanou šířkou a výškou:

Tento prvek div je menší (šířka je 300 pixelů a výška je 100 pixelů).

Tento div je větší (šířka je také 300px a výška je 100px).

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

Příklad

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

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

Nemovitost box-sizingtento problém řeší.

S vlastností CSS box-sizing

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

Pokud nastavíte box-sizing: border-box;na prvek, odsazení a ohraničení jsou zahrnuty do šířky a výšky:

Oba divy jsou nyní stejně velké!

Hurá!

Zde je stejný příklad jako výše, s box-sizing: border-box; přidáním 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;
}

Protože výsledek používání 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;mnoho formulářových prvků (ale ne všechny – proto vstupy a textové oblasti vypadají na šířku jinak: 100 %;).

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

Příklad

* {
box-sizing: border-box;
}

Vlastnost CSS Box Sizing

Property	Description
box-sizing	Defines how the width and height of an element are calculated: should they include padding and borders, or not

❮ Předchozí Další ❯

CSS tutoriál

Pokročilé CSS

CSS responzivní

CSS mřížka

CSS SASS

Příklady CSS

CSS reference

Velikost CSS boxu