Co dělá box-sizing: border-box?

Question

IT Interview Practice · Accepted Answer

`box-sizing` řídí, **co vlastnosti `width` a `height` skutečně měří**. Výchozí hodnota (`content-box`) měří pouze obsah; `border-box` je přinutí zahrnout padding a ohranici.

## Problém s výchozí hodnotou (content-box)

```css
.box {
  box-sizing: content-box; /* the default */
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px  ← bigger than you asked for! */
```

U `content-box` se padding a ohranice **přidávají na vrch** `width`, takže prvek skončí širší než číslo, které jste nastavili. To porušuje rozvržení: box `width: 50%` s paddingem přetéká jeho 50%.

## Řešení: border-box

```css
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
```

U `border-box` je `width` **konečná** vykreslovaná šířka — padding a ohranice jsou odečteny zevnitř. Číslo, které nastavíte, je velikost, kterou dostanete, což je mnohem intuitivnější.

## Univerzální reset

```css
*, *::before, *::after {
  box-sizing: border-box;
}
```

Skoro každý moderní stylesheet, framework a reset to aplikuje globálně. Činí změny velikosti předvídatelné: `width: 50%` + padding zůstane přesně 50% široké, dva boxy `width: 50%` sedí vedle sebe bez přetečení atd.

## Proč je to důležité

`border-box` eliminuje jedinou nejčastější příčinu bolestí hlavy v layoutu — nutnost mentálně přidat padding a ohranici ke každé šířce.

Jeho globální nastavení se považuje za osvědčenou výchozí praxi, protože "šířka, kterou nastavím, je šířka, kterou dostanu" je to, jak přirozeně očekáváte, že bude fungovat.

Problém s výchozí hodnotou (content-box)

Řešení: border-box

Univerzální reset

Proč je to důležité

Související otázky