10.12.2016, Vladimír Klaus, navštíveno 2464x

HTML/CSS

Občas potřebuji při práci s CSS pracovat s rozměry tak, aby se do zadané šířky/výšky započítávaly i vnitřní okraje (padding) a případně i rámeček (border). K čemu to je dobré?

Představte si, že máte někde obdélník široký 200 pixelů a přesně vám tam sedí, je pěkně obtékaný apod. A teď přijde někdo s požadavkem na přidání 4px rámečku a tím pádem i třeba přidání 8px vnitřního okraje, aby nebyl text nalepený na právě přidaný rámeček. To se pochopitelně udělá velmi jednoduše, ale nadefinovaná šířka 200 px vezme za své, protože to je šířka obsahu.

Řešením je přidání box-sizing: border-box, čímž řekneme, že definovaná šířka se má použít na celý obdélník. Tím pádem bude reálná šířka obsahu 200 - 2 x (4+8) = 176 px. A to je přesně to, čemu bychom se jinak nevyhnuli, kdyby nešel box-sizing upravit - neustálému přepočítávání hodnot.

.MujPanel {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200px;
  height: 120px;
  border: 4px dotted black;
  padding: 8px;
}

Mnohem lépe a s řadou dalších příkladů je to popsané v těchto zdrojích.

Zdroje:

Nahoru