Popíšte medzery v HTML a ich použitie.

Medzery v HTML, tiež nazývané "whitespace", sú znaky, ktoré prehliadač nezobrazuje (medzery, tabulátory, znaky nového riadku). Prehliadače ich zvyčajne zhlukujú do jednej medzery pri vykresľovaní, s výnimkou určitých prvkov a CSS vlastností.

Použitie:

1. Zlepšenie čitateľnosti kódu: Vývojári používajú medzery na vizuálne oddelenie prvkov v zdrojovom kóde HTML, čím ho robia prehľadnejším a štruktúrovanejším. To neovplyvňuje zobrazenie stránky v prehliadači.

2. Oddelenie riadkových prvkov: Prehliadače automaticky vkladajú medzeru medzi riadkovými prvkami umiestnenými vedľa seba v HTML kóde. Toto správanie možno zmeniť pomocou CSS.

3. Prvky, ktoré zachovávajú medzery:

   • <pre>: Zachováva všetky medzery a zalomenia riadkov, formátujúc text presne tak, ako je napísaný v zdrojovom kóde.
   • <code>: Zvyčajne sa používa v rámci <pre> na zachovanie formátovania kódu.
   • <textarea>: Vo vnútri textového poľa sa zachovávajú medzery a zalomenia riadkov.

4. CSS vlastnosť white-space: Umožňuje riadiť, ako prehliadač spracováva medzery v rámci prvku:

   • normal (štandardne): Zhlukuje medzery, zalomenia riadkov sa ignorujú (okrem <br>).
   • nowrap: Zhlukuje medzery, ale zabraňuje zalomeniu riadkov.
   • pre: Ekvivalentné použitiu tagu <pre>.
   • pre-wrap: Zachováva medzery a zalomenia riadkov, ale tiež umožňuje automatické zalomenie riadkov podľa šírky kontajnera.
   • pre-line: Zhlukuje medzery, ale zachováva zalomenia riadkov.

Príklad zhlukovania medzier:

HTML:

<p>
    Veľa        medzier

    a
    zalomení
    riadkov
</p>

Výsledok v prehliadači:

Veľa medzier a zalomení riadkov

Príklad s použitím <pre>:

HTML:

<pre>
    Zachovávajú sa
        všetky
            medzery
    a
    zalomenia
</pre>

Výsledok v prehliadači:

    Zachovávajú sa
        všetky
            medzery
    a
    zalomenia

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

HTML:

<div class="pre-wrap">
    Tento text bude zachovávať
        svoje medzery
            a zalomenia

    riadkov,
    a tiež sa bude zalamovať podľa šírky.
</div>

CSS:

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