A maneira como os navegadores lidam com o espaçamento em branco não é muito intuitiva no início, especialmente se você comparar como a Hypertext Markup Language trata o espaço em branco em relação aos programas de processamento de texto.
No software de processamento de texto, você pode adicionar muitos espaçamentos ou tabulações no documento e esse espaçamento será refletido na exibição do conteúdo do documento.
Este design WYSIWYG não é o caso com HTML ou com páginas da web.
Espaçamento na impressão
No software de processamento de texto, os três principais caracteres de espaço em branco são o espaço , a tabulação e o retorno do carro . Cada um desses caracteres age de maneira distinta, mas em HTML, os navegadores os tornam todos essencialmente iguais.
Quer você coloque um espaço ou 100 espaços em sua marcação HTML ou misture seu espaçamento com tabulações e retornos de carro, tudo isso será condensado em um espaço quando a página for renderizada pelo navegador.
Na terminologia de web design, isso é conhecido como colapso do espaço em branco.
Você não pode usar essas teclas de espaçamento típicas para adicionar espaços em branco em uma página da web porque o navegador recolhe espaços repetidos em apenas um espaço quando renderizado no navegador,
Usando CSS para criar guias HTML e espaçamento
Os sites hoje são construídos com uma separação de estrutura e estilo. A estrutura de uma página é controlada por HTML, enquanto o estilo é ditado por folhas de estilo em cascata. Para criar espaçamento ou obter um determinado layout, use CSS em vez de adicionar caracteres de espaçamento ao código HTML.
Se você estiver tentando usar guias para criar colunas de texto, em vez disso, use elementos <div> que são posicionados com CSS para obter o layout de coluna.
Esse posicionamento pode ser feito por meio de floats CSS, posicionamento absoluto e relativo ou técnicas de layout CSS mais recentes, como Flexbox ou CSS Grid.
Se os dados que você está criando forem tabulares, use tabelas para alinhar esses dados como desejar.
As tabelas costumam ter uma má reputação no web design porque foram usadas como ferramentas puras de layout por tantos anos, mas ainda são perfeitamente válidas se o seu conteúdo contiver dados tabulares genuínos.
Margens, preenchimento e recuo de texto
As maneiras mais comuns de criar espaçamento com CSS é usando um dos seguintes estilos CSS:
- margin
- padding
- text-indent
Por exemplo, indente a primeira linha de um parágrafo como uma guia com o seguinte CSS (observe que isso pressupõe que seu parágrafo tem um atributo de classe “primeiro” anexado a ele):
p.first {
text-indent: 5em;
}
Este parágrafo recua cerca de cinco caracteres.
Use as propriedades de margem ou preenchimento em CSS para adicionar espaçamento na parte superior, inferior, esquerda ou direita (ou combinações desses lados) de um elemento.
Obtenha qualquer tipo de espaçamento necessário recorrendo ao CSS.
Movendo texto em mais de um espaço sem CSS
Se tudo o que você deseja é que seu texto seja movido para mais de um espaço do item anterior, use o espaço não separável.
Para usar o espaço ininterrupto, você adiciona & nbsp; quantas vezes você precisar em sua marcação HTML.
O HTML respeita esses espaços não separáveis e não os reduzirá a um único espaço.
No entanto, essa abordagem é considerada uma prática pobre, pois adiciona marcação HTML extra a um documento apenas para atender às necessidades de layout.
Quando praticável, evite adicionar espaços não separáveis simplesmente para obter o efeito de layout desejado e, em vez disso, use margens e preenchimento CSS .
