Descreva os espaços em HTML e seu uso.

Os espaços em HTML, também chamados de "whitespace", são caracteres que o navegador não exibe (espaços, tabulações, caracteres de nova linha). Os navegadores geralmente os colapsam em um único espaço durante a renderização, exceto em certos elementos e propriedades CSS.

Uso:

1. Melhorar a legibilidade do código: Os desenvolvedores usam espaços para separar visualmente os elementos no código fonte HTML, tornando-o mais compreensível e estruturado. Isso não afeta a exibição da página no navegador.

2. Separação de elementos em linha: Os navegadores inserem automaticamente um espaço entre elementos em linha colocados lado a lado no código HTML. Esse comportamento pode ser alterado com CSS.

3. Elementos que mantêm espaços:

   • <pre>: Mantém todos os espaços e quebras de linha, formatando o texto exatamente como está no código fonte.
   • <code>: Geralmente usado dentro de <pre> para manter a formatação do código.
   • <textarea>: Dentro de um campo de entrada de texto, os espaços e quebras de linha são preservados.

4. Propriedade CSS white-space: Permite controlar como o navegador trata os espaços dentro de um elemento:

   • normal (padrão): Colapsa os espaços, as quebras de linha são ignoradas (exceto <br>).
   • nowrap: Colapsa os espaços, mas impede quebras de linha.
   • pre: Equivale ao uso da tag <pre>.
   • pre-wrap: Mantém os espaços e quebras de linha, e também permite a quebra automática de linha de acordo com a largura do contêiner.
   • pre-line: Colapsa os espaços, mas mantém as quebras de linha.

Exemplo de colapso de espaços:

HTML:

<p>
    Muitos        espaços

    e
    quebras
    de linha
</p>

Resultado no navegador:

Muitos espaços e quebras de linha

Exemplo usando <pre>:

HTML:

<pre>
    Os espaços são
        todos
            preservados
    e
    quebras
</pre>

Resultado no navegador:

    Os espaços são
        todos
            preservados
    e
    quebras

Exemplo usando CSS white-space:

HTML:

<div class="pre-wrap">
    Este texto irá preservar
        seus espaços
            e quebras

    de linha,
    e também irá ajustar-se à largura.
</div>

CSS:

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