6. Tvorba layoutu

V předchozí kapitole jsme si vyzkoušeli, jak vytvořit jednoduchou stránku. Elementy stránky byly záměrně vybrány tak, aby nebylo potřeba použití pozicování elementů. Nyní se tedy podíváme, jak jednotlivé elementy na stránce umístit do míst, kde je chceme zobrazit.

Blokové a řádkové elementy a vlastnost display

V předchozích kapitolách jsme používali dvě základní HTML značky: <div> a <span>. I ve svém kódu jste je již používali. Mohli jste si tedy všimnout, že element <div> se používá pro blokové zobrazení, zatímco element <span> pro řádkové.

Blokové elementy

Blokové elementy jsou takové, které se mají vykreslit jako blok (čtverec či obdélník).

• Pokud nezadáte blokovému prvku šířku, bude ve výchozím nastavení vždy 100% šířky nadřazeného prvku.
• Můžeme definovat okraje a výplně (padding).
• Každý blokový prvek je umístěn pod předcházející prvek.

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

.block {
  width: 200px;
  height: 100px;
  margin: 10px;
  padding: 5px;
  background: salmon;
}

Příklady HTML elementů, které prohlížeč ve výchozím nastavení zobrazuje jako bloky jsou <div>, ale také <p>, <header>, <section>, <nav>, <footer>, <article>, <form>, <ul>, <ol> a také elementy nadpisů, jako je <h1>.

Elementy řádkové

Řádkové elementy jsou takové, které se chovají jako řádky textu, jinými slovy plynou spolu s textem.

• Nelze jim určit rozměry pomocí width a height
• Není možné nastavi horní a spodní odsazení (margin-top a margin-bottom). Pravé a levé odsazení, a nastavení výplně však funguje.
• Vezmeme-li v úvahu, že se řádkové elementy chovají jako řádky textu, může jim být nastavena vlastnost vertikálního zarovnání (vertical-align). Touto vlastností se však podrobněji zabývat nebudeme.

<p>
  Vítr skoro nefouká a tak by se na první pohled mohlo zdát, 
  že se balónky snad vůbec nepohybují.
  Jenže kvůli všudy přítomné trávě 
  <span class="inline">jsou stíny balónků sotva vidět</span>, 
  natož aby šlo rozeznat, jakou barvu tyto stíny mají.
</p>

.inline {
  padding: 15px;
  color: lightblue;
}

Příkladem řádkového elementu jsou prvky <span> a <a>.

Stojí za zmínku, že některé elementy se nechovají ani blokově, ani řádkově. Respektive kombinují některé chování obou prvků. Jsou to elementy <img>, <input> a <select>. Těmto prvkům je možné nastavit rozměry pomocí vlastností v CSS, ale na rozdíl od blokových prvků, nezalamují řádek.

Definice chování elementů pomocí vlastnosti display

Každý HTML element má nastavený výchozí typ chování, které ale můžeme pomocí CSS velmi snadno změnit, a nastavit např. <div> tak, aby se choval jako řádkový element.

Jak na to? Podívejme se na CSS vlastnost display, který odpovídá za to, jakým typem element na stránce je. Vlastnos display má mnoho nastavitelných hodnot, z nichž mnoho je tajemstvím i pro pokročilejší vývojáře.

Podívejme se na nejzákladnější tři:

• display: inline - zobrazí element jako řádkový
• display: block - zobrazí element jako blokový
• display: inline-block - kombinuje vlastnosti řádkových a blokových. S jeho pomocí můžeme dát prvkům rozměry a odsazení. Nezalamuje však řádky. Můžeme tedy umístit více prvků vedle sebe.

<div class="container">
  <div class="inline-block-item"></div>
  <span class="inline-block-item"></span>
  <p class="inline-block-item"></p>
</div>

.inline-block-item {
  display: inline-block;
  width: 150px;
  height: 150px;
  margin: 5px 10px 6px 12px;
  background-color: lightblue;
}

Shrňme si tedy v tabulce, jaké vlastnosti můžeme nastavit pro jednotlivé typy elementů: