A criação de espaços e separação física de elementos em HTML pode ser difícil de entender para o web designer iniciante. Isto é porque HTML tem uma propriedade conhecida como "colapso do espaço em branco". quer você digite 1 espaço ou 100 em seu código HTML, o navegador da web reduz automaticamente esses espaços para apenas um único espaço Isso é diferente de um programa como Microsoft Word, que permite aos criadores de documentos adicionar vários espaços para separar palavras e outros elementos desse documento. Não é assim que funciona o espaçamento do design do site.
Então, como você adiciona espaços em branco em HTML que aparecem no página da web que você construiu? Este artigo examina algumas das diferentes maneiras.
Espaços em HTML com CSS
A maneira preferida de adicionar espaços em seu HTML é com Cascading Style Sheets (CSS). CSS deve ser usado para adicionar quaisquer aspectos visuais de uma página da web e, como o espaçamento faz parte das características de design visual de uma página, CSS é onde você deseja que isso seja feito.
Em CSS, você pode usar as propriedades de margem ou preenchimento para adicionar espaço ao redor dos elementos. Além disso, a propriedade text-indent adiciona espaço à frente do texto, como para recuar parágrafos.
Aqui está um exemplo de como usar CSS para adicionar espaço na frente de todos os seus parágrafos. Adicione o seguinte CSS ao seu externo ou interno folha de estilos:
p {
recuo de texto: 3em;
}
Espaços em HTML dentro do seu texto
Se você deseja apenas adicionar um ou dois espaços adicionais ao seu texto, você pode usar o espaço ininterrupto. Este caractere atua como um caractere de espaço padrão, mas não entra em colapso dentro do navegador.
Aqui está um exemplo de como adicionar cinco espaços dentro de uma linha de texto:
Este texto tem cinco espaços extras dentro dele
Usa o HTML:
Este texto tem cinco espaços extras dentro dele
Você também pode usar o
tag para adicionar quebras de linha extras.
Esta frase tem cinco quebras de linha no final
Por que espaçar em HTML é uma má ideia
Embora essas opções funcionem - o elemento de espaços sem quebra irá de fato adicionar espaçamento ao seu texto e à linha quebras adicionarão espaçamento abaixo do parágrafo mostrado acima - esta não é a melhor maneira de criar espaçamento em seu página da Internet. Adicionar esses elementos ao seu HTML adiciona informações visuais ao código em vez de separar a estrutura de uma página (HTML) dos estilos visuais (CSS). As melhores práticas determinam que eles devem ser separados por uma série de razões, incluindo facilidade de atualização no futuro e tamanho geral do arquivo e desempenho da página.
Se você usar uma folha de estilo externa para ditar todos os seus estilos e espaçamentos, é fácil alterar esses estilos para todo o site, pois você simplesmente precisa atualizar essa folha de estilo.
Considere o exemplo acima da frase com cinco
tags no final dele. Se você quiser esse espaço na parte inferior de cada parágrafo, precisará adicionar esse código HTML a cada parágrafo em todo o site. Essa é uma boa quantidade de marcação extra que irá inchar suas páginas. Além disso, se você decidir no futuro que esse espaçamento é muito ou pouco e deseja alterá-lo um pouco, precisará editar cada parágrafo em todo o seu site. Não, obrigado!
Em vez de adicionar esses elementos de espaçamento ao seu código, use CSS.
p {
acolchoamento inferior: 20px;
}
Essa única linha de CSS adicionaria espaçamento sob os parágrafos da sua página. Se você quiser alterar esse espaçamento no futuro, edite essa linha (em vez de todo o código do site) e pronto!
Agora, se você precisar adicionar um único espaço em uma parte do seu site, usando um
tag ou um único espaço sem quebra não é o fim do mundo, mas você precisa ter cuidado. Usar essas opções de espaçamento de HTML embutido pode ser uma ladeira escorregadia. Embora um ou dois possam não prejudicar seu site, se você continuar nesse caminho, irá introduzir problemas em suas páginas. No final, é melhor usar CSS para espaçamento de HTML e todas as outras necessidades visuais de página da web.