Rozšíření prvků v CSS pro JavaScript

Nastavení CSS vlastností width a height negrantuje, že prvek bude dané velikosti. Podívejme se na příkladech.

Příklad

Nyní se velikosti prvku shodují s nastavenými:

html<div id="elem">
  text
</div>

css#elem {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
}

Результат:

Příklad

A nyní nastavme prvku vlastnost padding. Výsledkem bude, že skutečná šířka prvku bude větší a rozšíří se o zadanou hodnotu vnitřního odsazení:

html<div id="elem">
  text
</div>

css#elem {
  padding: 25px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
}

Результат:

Příklad

Přítomnost ohraničení také rozšiřuje prvek:

html<div id="elem">
  text
</div>

css#elem {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
  border: 20px solid #F0D7A1;
}

Результат:

Příklad

Vlastnost box-sizing umožňuje měnit výše popsané chování. Lze zařídit, aby ani vnitřní odsazení, ani ohraničení nerozšiřovaly prvek. K tomu je třeba této vlastnosti nastavit hodnotu border-box:

html<div id="elem">
  text
</div>

css#elem {
  box-sizing: border-box;
  padding: 20px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
  border: 20px solid #F0D7A1;
}

Результат:

Důležitost popsaného

Z pohledu JavaScriptu je popsaná situace ne příliš pohodlná. Vždyť vychází najevo, že po přečtení hodnoty vlastnosti width si vůbec nemůžeme být jisti, že prvek bude právě této šířky.