Descrieți spațiile în HTML și utilizarea lor…

Spațiile din HTML, numite și "whitespace", sunt caractere care nu sunt afișate de browser (spații, taburi, caractere de linie nouă). Browser-ele le comprimă de obicei într-un singur spațiu în timpul randării, cu excepția anumitor elemente și proprietăți CSS.

Utilizare:

Îmbunătățirea lizibilității codului: Dezvoltatorii folosesc spații pentru a separa vizual elementele în codul sursă HTML, făcându-l mai ușor de înțeles și structurat. Acest lucru nu afectează afișarea paginii în browser.
Separarea elementelor inline: Browser-ele inserează automat un spațiu între elementele inline plasate unul lângă altul în codul HTML. Acest comportament poate fi modificat cu CSS.
Elemente care păstrează spațiile:
- <pre>: Păstrează toate spațiile și salturile de linie, formatează textul exact așa cum este în codul sursă.
- <code>: De obicei utilizat în interiorul <pre> pentru a păstra formatul codului.
- <textarea>: În interiorul unui câmp de text, spațiile și salturile de linie sunt păstrate.
Proprietatea CSS white-space: Permite controlul modului în care browser-ul tratează spațiile din interiorul unui element:
- normal (implicit): Comprimă spațiile, salturile de linie sunt ignorate (cu excepția <br>).
- nowrap: Comprimă spațiile, dar împiedică salturile de linie.
- pre: Echivalent cu utilizarea tag-ului <pre>.
- pre-wrap: Păstrează spațiile și salturile de linie, și permite înfășurarea automată a textului.
- pre-line: Comprimă spațiile, dar păstrează salturile de linie.

Exemplu de comprimare a spațiilor:

HTML:

<p>
    Multe        spații

    și
    salturi
    de linie
</p>

Rezultat în browser:

Multe spații și salturi de linie

Exemplu cu <pre>:

HTML:

<pre>
    Spațiile sunt
        păstrate
            toate
    și
    salturile
</pre>

Rezultat în browser:

    Spațiile sunt
        păstrate
            toate
    și
    salturile

Exemplu cu CSS white-space:

HTML:

<div class="pre-wrap">
    Acest text va păstra
        spațiile
            și salturile

    de linie,
    și se va ajusta automat la lățime.
</div>

CSS:

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

Descrieți spațiile în HTML și utilizarea lor.