Criar 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 "colapso de espaço em branco". quer você digite 1 espaço ou 100 em seu código HTML, o navegador da Web recolhe automaticamente esses espaços para apenas um único espaço. Isso é diferente de um programa como o Microsoft Word, que permite que os criadores de documentos adicionem 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? Este artigo examina algumas das diferentes maneiras.
Espaços em HTML com CSS
A maneira preferida de adicionar espaços no seu HTML é com CSS (Cascading Style Sheets). O 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, o CSS é onde você quer que isso seja feito.
Em CSS, você pode usar as propriedades margin ou padding para adicionar espaço ao redor dos elementos. Além disso, a propriedade text-indent adiciona espaço à frente do texto, como para parágrafos recuados.
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 estilos externa ou interna:
p {recuo de texto: 3em;} Se você quiser adicionar apenas um ou dois espaços adicionais ao seu texto, poderá usar o espaço não separável. Esse personagem age como um caractere de espaço padrão, mas não entra em colapso no 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 Esta frase tem cinco quebras de linha no final Embora essas opções funcionem - o elemento de espaços sem quebra realmente adicionará espaçamento ao seu texto e as quebras de linha adicionarão espaçamento abaixo do parágrafo mostrado acima - essa não é a melhor maneira de criar espaçamento na 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 melhores práticas determinam que elas devem ser separadas por diversos motivos, incluindo a facilidade de atualização no futuro e o tamanho geral do arquivo e o desempenho da página. Se você usar uma folha de estilos externa para ditar todos os seus estilos e espaçamentos, é fácil alterar esses estilos para todo o site, pois basta atualizar essa folha de estilos. Considere o exemplo acima da sentença com cinco Em vez de adicionar esses elementos de espaçamento ao seu código, use CSS. p {fundo de enchimento: 20px;} Essa linha de CSS adicionaria espaçamento nos parágrafos da sua página. Se você quiser alterar esse espaçamento no futuro, edite essa linha (em vez do código de todo o site) e pronto! Agora, se você precisar adicionar um único espaço em uma parte do site, use um Espaços em HTML: dentro do seu texto
tag para adicionar quebras de linha extras.
Por que o espaçamento em HTML é uma má ideia
tags no final do mesmo. Se você quisesse essa quantidade de espaçamento na parte inferior de cada parágrafo, precisaria adicionar esse código HTML a todos os parágrafos do site inteiro. Essa é uma quantidade razoável de marcação extra que irá inchar suas páginas. Além disso, se você decidir que esse espaçamento é muito ou pouco e deseja alterá-lo um pouco, precisará editar todos os parágrafos do site inteiro. Não obrigado!
tag ou um único espaço não quebra não é o fim do mundo, mas você precisa ter cuidado. O uso dessas opções de espaçamento HTML inline pode ser uma inclinação escorregadia. Embora um ou dois possam não prejudicar seu site, se você continuar nesse caminho, você introduzirá problemas em suas páginas. No final, é melhor você optar pelo CSS para espaçamento HTML e por todas as outras necessidades visuais da página.
