Popište mezery v HTML a jejich použití.

Mezery v HTML, také nazývané "whitespace", jsou znaky, které prohlížeč nezobrazuje (mezery, tabulátory, znaky nového řádku). Prohlížeče je obvykle sloučí do jednoho prostoru při vykreslování, s výjimkou určitých prvků a vlastností CSS.

Použití:

Zlepšení čitelnosti kódu: Vývojáři používají mezery k vizuálnímu oddělení prvků v HTML zdrojovém kódu, což jej činí přehlednějším a strukturovanějším. To neovlivňuje zobrazení stránky v prohlížeči.
Oddělení řádkových prvků: Prohlížeče automaticky vloží mezeru mezi inline prvky umístěné vedle sebe v HTML kódu. Toto chování lze změnit pomocí CSS.
Prvky, které zachovávají mezery:
- <pre>: Zachovává všechny mezery a zalomení řádků, formátuje text přesně tak, jak je v zdrojovém kódu.
- <code>: Obvykle se používá uvnitř <pre> k zachování formátování kódu.
- <textarea>: Uvnitř textového pole jsou mezery a zalomení řádků zachovány.
Vlastnost CSS white-space: Umožňuje řídit, jak prohlížeč zpracovává mezery uvnitř prvku:
- normal (výchozí): Sloučí mezery, zalomení řádků jsou ignorována (kromě <br>).
- nowrap: Sloučí mezery, ale zabrání zalomení řádků.
- pre: Je ekvivalentní použití tagu <pre>.
- pre-wrap: Zachovává mezery a zalomení řádků, umožňuje také automatické zalamování podle šířky kontejneru.
- pre-line: Sloučí mezery, ale zachovává zalomení řádků.

Příklad sloučení mezer:

HTML:

<p>
    Hodně        mezer

    a
    zalomení
    řádků
</p>

Výsledek v prohlížeči:

Hodně mezer a zalomení řádků

Příklad s použitím <pre>:

HTML:

<pre>
    Zachovány
        všechny
            mezery
    a
    zalomení
</pre>

Výsledek v prohlížeči:

    Zachovány
        všechny
            mezery
    a
    zalomení

Příklad s použitím CSS white-space:

HTML:

<div class="pre-wrap">
    Tento text bude zachovávat
        své mezery
            a zalomení

    řádků,
    a také se bude automaticky přizpůsobovat šířce.
</div>

CSS:

.pre-wrap {
    white-space: pre-wrap;
    border: 1px solid black;
    width: 150px;
}