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. Isso ocorre porque o HTML tem uma propriedade conhecida como “redução dos espaços 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 o 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 na 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 qualquer aspecto visual 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 à sua folha de estilo externa ou interna: 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 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; cinco espaços extras dentro dele
Você também pode usar a 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 as quebras de linha irão adicionar espaçamento abaixo do parágrafo mostrado acima – esta não é a melhor maneira de criar espaçamento em sua página da web. 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 práticas recomendadas determinam que eles devem ser separados por vários motivos, 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 dela. 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 esta linha (em vez de todo o código do site) e pronto! Agora, se você precisa adicionar um único espaço em uma parte do seu site, usar uma tag
ou um único espaço ininterrupto 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.
Formato mla apa chicago Sua Citação
Kyrnin, Jennifer. “Criar HTML em branco.” ThoughtCo, maio. 14 de 2021, thinkingco.com/spaces-in-html-3466574.
Kyrnin, Jennifer. (2021, 14 de maio). Crie HTML em branco. Obtido em https://www.thoughtco.com/spaces-in-html-3466574
Kyrnin, Jennifer. “Criar HTML em branco.” ThoughtCo. https://www.thoughtco.com/spaces-in-html-3466574 (acessado em 21 de maio de 2021).
