Box model (margin, padding, border)

Čtyři vrstvy box modelu

Každý prvek se skládá ze čtyř vrstev, od středu ven:

• Content (obsah) – samotný obsah prvku: text, obrázek nebo potomkové prvky. Jeho rozměry určují vlastnosti width a height.
• Padding (vnitřní odsazení) – prostor mezi obsahem a okrajem. Má barvu pozadí prvku.
• Border (okraj) – rámeček kolem prvku. Lze nastavit barvu, tloušťku a styl.
• Margin (vnější odsazení) – prostor vně prvku, mezi ním a okolními prvky. Je vždy průhledný.

Margin – vnější odsazení

Margin odděluje prvek od sousedů. Lze nastavit pro každou stranu zvlášť nebo zkráceným zápisem:

/* Každá strana zvlášť */
p {
  margin-top: 1rem;
  margin-right: 0;
  margin-bottom: 1rem;
  margin-left: 0;
}

/* Zkrácený zápis: top right bottom left (po směru hodinových ručiček) */
p {
  margin: 1rem 0;   /* top/bottom: 1rem, left/right: 0 */
}

/* Všechny strany stejně */
section {
  margin: 2rem;
}

/* Automatické vycentrování blokového prvku */
.container {
  max-width: 900px;
  margin: 0 auto;
}

Speciální chování: svislé marginy sousedních bloků se slučují (merge). Pokud má odstavec margin-bottom: 1rem a následující nadpis margin-top: 2rem, mezera mezi nimi bude 2rem, nikoli 3rem – vyhraje větší hodnota.

Padding – vnitřní odsazení

Padding vytváří prostor uvnitř prvku mezi obsahem a jeho okrajem. Zápis je stejný jako u marginu:

button {
  padding: 0.5rem 1.25rem;  /* top/bottom: 0.5rem, left/right: 1.25rem */
}

.card {
  padding: 1.5rem;
}

Na rozdíl od marginu je padding vyplněn barvou pozadí prvku – proto zvětšuje „klikatelnou plochu“ tlačítka nebo interaktivního prvku. Větší padding na tlačítkách zlepšuje přístupnost pro uživatele s motorickými obtížemi.

Border – okraj

Border je rámeček kolem prvku. Definuje se třemi hodnotami: tloušťka, styl a barva:

/* Plný border všude */
.card {
  border: 1px solid #cccccc;
}

/* Pouze spodní border */
h2 {
  border-bottom: 2px solid goldenrod;
}

/* Zaoblené rohy */
button {
  border-radius: 6px;
}

/* Dokonalý kruh */
.avatar {
  border-radius: 50%;
}

Nejčastější styly borderu: solid (plná čára), dashed (čárkovaná), dotted (tečkovaná), none (žádný).

Box-sizing – jak se počítají rozměry

Výchozí chování CSS (box-sizing: content-box) je poněkud neintuitivní: width a height se vztahují pouze k obsahu, padding a border se přičítají navíc. Prvek o šířce 200px s paddingem 20px na každé straně tak ve skutečnosti zabere 240px.

Moderní CSS weby proto používají box-sizing: border-box jako výchozí nastavení. S tímto nastavením width zahrnuje padding i border – rozměry se chují přesně tak, jak intuitivně očekáváš:

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

Tento řádek se přidává na začátek každého CSS souboru a řeší spoustu budoucích záhad s rozměry.

Tip od Zdeňka

Zdeněk radí: box-sizing: border-box je první věc, kterou přidávám do každého nového CSS souboru. Ušetří spoustu záhad. A nezapomínej na dostatečné padding u interaktivních prvků – tlačítka a odkazy s malým paddingem jsou nepříjemné i pro vidící uživatele s myší, pro uživatele s motorickým postižením nebo na dotykové obrazovce pak téměř nepoužitelné.