Como usar HTML e CSS para criar guias e espaçamento

Os navegadores colapsam as quebras de linha HTML, então use CSS para espaçar as coisas corretamente

Imagens Getty

A maneira como os navegadores lidam com o espaço em branco não é muito intuitiva no início, especialmente se você comparar como o Hypertext Markup Language lida com 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 de HTML ou de páginas da web.

Espaçamento na impressão

No software de processamento de texto, os três caracteres de espaço em branco primários são os espaço , aba , e retorno de carro . Cada um desses caracteres age de maneira distinta, mas em HTML, os navegadores os tornam essencialmente iguais. Quer você coloque um espaço ou 100 espaços em seu Marcação HTML ou misture seu espaçamento com tabulações e retornos de carro, todos eles serão condensados ​​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 e espaçamento HTML

Os sites de hoje são construídos com uma separação de estrutura e estilo. A estrutura de uma página é tratada pelo HTML enquanto o estilo é ditado pelas 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ê está tentando usarabaspara criar colunas de texto, em vez disso, use elementos posicionados com CSS para obter esse layout de coluna. Esse posicionamento pode ser feito através 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á organizando forem dados tabulares, use tabelas para alinhar esses dados como desejar. As tabelas geralmente têm uma má reputação no design da web porque foram abusadas como ferramentas de layout puro por muitos anos, mas as tabelas ainda são perfeitamente válidas se seu conteúdo contiver dados genuinamente tabulares.

Margens, preenchimento e recuo de texto

As formas mais comuns de criar espaçamento com CSS é usando um dos seguintes estilos CSS:

• margem
• preenchimento
• recuo de texto

Por exemplo, recue a primeira linha de um parágrafo como uma tabulação com o seguinte CSS (observe que isso pressupõe que seu parágrafo tenha um atributo de classe 'primeiro' anexado a ele):

|_+_|

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 mais de um espaço sem CSS

Se tudo o que você deseja é que seu texto seja movido mais de um espaço para longe do item anterior, use o espaço sem quebra.

Para usar o espaço sem quebra, você adiciona quantas vezes você precisar em sua marcação HTML.

O HTML respeita esses espaços ininterruptos e não os recolherá em um único espaço. No entanto, essa abordagem é considerada uma prática ruim, pois adiciona marcação HTML extra a um documento apenas para atender às necessidades de layout. Quando praticável, evite adicionar espaços sem quebra simplesmente para obter o efeito de layout desejado e use Margens e preenchimento CSS em vez de.