5.3. CSS Box Model

Nyní víme, jak můžeme prvky graficky upravovat. Je načase zjistit, jakým způsobem můžeme tyto prvky umisťovat do stránky. Každý prvek na stránce si můžeme představit jako obdélník s pevně danými rozměry - výška a šířka. To však není vše. Již jsme viděli, že můžeme prvek ohraničit (border). Prvku však můžeme také nastavit vyplnění (padding) a odsazení (margin).

HTML elementům můžeme navíc přidat výšku a šířku pomocí vlastností height a width.

<div class="box-of-chocolates">
  Krabička s čokoládou.
</div>

.box-of-chocolates {
  width: 200px;
  height: 100px;
  background-color: lightsalmon;
}

Vyplnění (padding)

Jak je vidět na příkladu, text přiléhá těsně k okraji prvku. Toto není příliš estetické. V CSS je proto možné definovat vyplnění, které určuje vzdálenost obsahu od okraje prvku. Tato výplň je definována způsobem:

.box-of-chocolates {
  padding: 30px;
  width: 200px;
  height: 100px;
  background-color: lightsalmon;
}

Vyplnění může mít různé hodnoty pro jednotlivé strany prvku, tj. ze zhora, z prava, ze zdola a z leva. Můžeme tedy zapsat vyplnění pro každou část:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 12px;

Případně zkrácený zápis:

padding: 10px 15px 20px 12px;

Aby ve zkráceném zápisu nedošlo k chybě, musíme si pamatovat, že se zápis provádí po směru hodinových ručiček, začínajícím v horní části.

Pokud chceme vyplnění ze všech stran stejné, stačí nám jednoduchý zápis:

padding: 30px

V případě, kdy bychom chtěli vyplnění stejné pro horní a spodní část, a pro levou a pravou část, můžeme použít zápis:

padding: 30px 15px;
/* První hodnota se v tomto případě postará o horní a spodní část, druhá o pravou a levou. */

Ohraničení (border)

O ohraničení jsme se již bavili v dřívější kapitole. Připomeňme si tedy, že můžeme dát ohraničení různé styly:

.box-of-chocolates {
  padding: 30px;
  width: 200px;
  height: 100px;
  border: 2px dashed navy;
  background-color: lightsalmon;
}

Ohraničení je také možno zapsat rozděleným zápisem pomocí jednotlivých vlastností:

border-width: 2px;
border-style: dashed;
border-color: navy;

Odsazení (margin)

Odsazení prvku je vzdálenost mezi okrajem (hranicí) elementu a dalším - sousedním prvkem. Odsazení se definuje stejným způsobem, jako vyplnění. Můžeme tedy použít jak zkrácený, tak rozložený zápis:

.box-of-chocolates {
  padding: 30px;
  margin: 20px;
  width: 200px;
  height: 100px;
  border: 2px dashed navy;
  background-color: lightsalmon;
}

Zajímavostí zde je to, že odsazení (margin) může nabývat i záporných hodnot, zatímco ohraničení(border) a vyplnění (padding) nikoli. V případě, že u ohraničení nebo vyplnění uvedete záporné hodnoty, budou tyto vlastnosti prvku ignorovány.

Jak takový box model prvku stránky vypadá, se můžete podívat pomocí vývojářských nástrojů. Zde si ukážeme jak je zobrazen pomocí Chrome:

Jednotky v CSS

K tomu, abychom mohli nastavovat prvkům rozměry, potřebujeme vědět, jaké jednotky je možné používat, a jak se tyto jednotky chovají. Podíváme se tedy na ty nejpopulárnější:

• % Rozměry můžeme definovat v procentech. Tyto pak vyjadřují rozměr ve vztahu k nadřazenému prvku. Procenta jsou užitečná v případě, kdy chceme, aby se velikost prvku měnila v závislosti na velikosti zobrazené plochy (velikosti okna prohlížeče).

.fluid-container {
  width: 33.33%;
}

• em Zatímco pixely reprezentují fyzické obrazové body, které jsou absolutní, em je relativní jednotka, odkazující na velikost fontu rodičovského elementu. V případě, že dáme velikost prvku, nebo písma 1em, znamená to, že tento rozměr se rovná velikosti prvku/písma nadřazeného elementu. Podívejme se na příklad:

<div class="grandpa">
  Jsem dědečkem.
  <div class="father">
    Jsem otcem.
    <div class="son">
      Jsem synem
    </div>
  </div>
</div>

.grandpa {
  font-size: 1.5em; /* 16px */
}
.father {
  font-size: 1.5em; /* 1.5 * 16px = 24px */
}
.son {
  font-size: 1.5em; /* 1.5 * 24px = 36px */
}

Navzdory tomu, že každý prvek má stejnou hodnotu font-size: 1.5em, výsledná velikost se liší. Z počátku se může zdát, že tato jednotka není velmi intuitivní, ale postupně, jak se budete nořit hlouběji do HTML a CSS, bude pro vás otevírat nepřeberné množství pro využití.

• rem Jedná se také o relativní jednotku. Na rozdíl od em je rem relativní vůči rootovému prvku HTML. Obvykle to znamená, že rem jednotky jsou vypočteny ve vztahu k velikosti písma deklarované pro element html:

<section class="outer">
  <h1>Hlavní titulek</h1>
  <p>Paragraf v sekci.</p>
  <section class="inner">
      <h2>Titulek vnořený</h2>
      <p>Paragraf ve vnořené sekci.</p>
  </section>
</section>

html {
  font-size: 16px;
}
.outer {
  font-size: 1.5rem; /* 1.5 * 16px = 24px */
}
.inner {
  font-size: 2rem; /* 2 * 16px = 32px */
}

Šířka webu: 960px
Modrá barva: #2e3ead

Pokud byste chtěli vycházet ze stejné struktury, můžete využít tohoto:

<!DOCTYPE html>
<html lang="cs-CZ">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Kurz HTML & CSS.">
    <title>GeekGirlsCarrots Ostrava - HTML & CSS pro začátečníky</title>        
  </head>
  <body>
  <div class="row menu">
    <div class="container">      
    </div>
  </div>
  <div class="row logo">
    <div class="container">
    </div>
  </div>
  <div class="row about">
    <div class="container">      
    </div>
  </div>
  <div class="row features">
    <div class="container">      
    </div>
  </div>
  <footer>
  </footer>
  </body>
</html>