Aprašykite tarpus HTML ir jų naudojimą.

HTML tuščiosios vietos, dar vadinamos "whitespace", yra simboliai, kuriuos naršyklė nerodo (tuščiosios vietos, tabuliacijos, naujos eilutės simboliai). Naršyklės paprastai sujungia juos į vieną tuščią vietą vaizdavimo metu, išskyrus tam tikrus elementus ir CSS savybes.

Naudojimas:

Kodo skaitomumo gerinimas: Kūrėjai naudoja tarpus vizualiniam elementų atskyrimui HTML kode, padarydami jį aiškesnį ir struktūruotą. Tai neveikia puslapio atvaizdavimo.
Eilutės elementų atskyrimas: Naršyklės automatiškai įterpia tarpą tarp šalia esančių eilutės elementų HTML kode. Šį elgesį galima pakeisti CSS.
Elementai, išsaugantys tarpus:
- <pre>: Išsaugo visus tarpus ir eilutės pertraukas, formatuodamas tekstą tiksliai taip, kaip jis parašytas šaltinio kode.
- <code>: Paprastai naudojamas <pre> viduje, norint išsaugoti kodo formatavimą.
- <textarea>: Tekstiniame lauke išsaugomi tarpai ir eilutės pertraukos.
CSS savybė white-space: Leidžia valdyti, kaip naršyklė apdoroja tarpus:
- normal (numatytasis): Sujungia tarpus, eilutės pertraukos ignoruojamos (išskyrus <br>).
- nowrap: Sujungia tarpus, bet neleidžia eilutės pertraukų.
- pre: Atitinka <pre> žymės funkciją.
- pre-wrap: Išsaugo tarpus ir eilutės pertraukas, taip pat leidžia automatinį perrašymą pagal konteinerio plotį.
- pre-line: Sujungia tarpus, bet išsaugo eilutės pertraukas.

Pavyzdys tarpus sujungimo:

HTML:

<p>
    Daug        tarpus

    ir
    pertraukas
    eilutėse
</p>

Rezultatas naršyklėje:

Daug tarpus ir pertraukas eilutėse

Pavyzdys naudojant <pre>:

HTML:

<pre>
    Išsaugomi
        visi
            tarpai
    ir
    pertraukas
</pre>

Rezultatas naršyklėje:

    Išsaugomi
        visi
            tarpai
    ir
    pertraukas

CSS white-space savybės pavyzdys:

HTML:

<div class="pre-wrap">
    Šis tekstas išsaugos
        savo tarpus
            ir pertraukas

    eilutes,
    taip pat bus perrašytas pagal plotį.
</div>

CSS:

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