Como criar espaço extra em HTML ou página da web
A criação de espaço em branco extra em seu HTML em uma página da web pode ser realizada de várias maneiras, dependendo do tipo de espaço que você deseja criar. As seções a seguir contêm muitas das diferentes maneiras de criar espaço extra usando HTML e CSS.
Criação de espaços extras antes ou depois do texto
Uma das coisas mais confusas para novos usuários que estão criando uma página da web é que eles não podem pressionar o barra de espaço várias vezes para criar espaços adicionais. Para criar espaços extras antes, depois ou entre seu texto, use o & nbsp; (espaço sem quebra) caractere HTML estendido.
Por exemplo, com a frase “espaço extra” usando um espaço duplo, temos o seguinte código em nosso HTML.
extra space
Se você estiver usando um editor WYSIWYG para inserir o código acima, deverá estar na guia HTML ou editando o código HTML.
Para obter uma lista de caracteres HTML especiais estendidos, consulte: Lista completa de caracteres HTML especiais estendidos.
Mantenha espaçamento no texto que é colado em uma página
Se estiver colando texto com espaços ou tabulações extras, você pode usar a tag HTML
para manter o texto formatado. Abaixo está um exemplo de como colar texto com espaços extras usando a tag.This text has lots of spacesO exemplo acima é feito usando o código HTML abaixo.
<pre class="tab">This text has lots of spaces</pre>
Se você estiver usando um editor WYSIWYG para inserir o código acima, deverá estar na guia HTML ou editando o código HTML.
Criação de espaço extra em torno de um elemento ou objeto
Qualquer elemento HTML pode ter espaçamento adicional adicionado à parte superior, direita, inferior ou esquerda. No entanto, certifique-se de entender a diferença entre margem e preenchimento antes de decidir o tipo de espaço que deseja adicionar ao redor do elemento ou objeto. Conforme visto na imagem abaixo, o preenchimento envolve o elemento, dentro da borda, e a margem fora da borda.
O exemplo abaixo mostra nosso parágrafo rodeado por uma borda, recuado com uma margem e com espaçamento à direita e inferior.
Um exemplo de parágrafo com margem e preenchimento.
O exemplo acima foi criado usando o código abaixo.
<p style="margin-left: 2.5em;padding: 0 7em 2em 0;border-width: 2px; border-color: black; border-style:solid;">Example of a paragraph with margin and padding.</p>
Na primeira seção do código, "margin-left: 2.5em;" adiciona uma margem esquerda de 2,5 em, o que dá a aparência de texto recuado. Conforme mostrado pelo exemplo, esse espaçamento está fora da borda. Na próxima seção, "preenchimento: 0 7em 2em 0;" está definindo o preenchimento superior, direito, inferior e esquerdo (sentido horário). Há "0" no preenchimento superior, "7em" na direita, "2em" na parte inferior e 0 na esquerda. O restante deste exemplo define a aparência da borda.
Criação de uma guia usando CSS e HTML
Uma guia pode ser criada em HTML ajustando a margem esquerda de um elemento. Por exemplo, este parágrafo tem uma margem esquerda de 2,5 em do elemento que contém o texto. O CSS para criar esta margem esquerda é mostrado abaixo.
.tab { margin-left: 2.5em }
Depois de colocar esse código em nosso arquivo CSS, podemos aplicar a classe "tab" a qualquer texto para criar a aparência de uma tab. O valor da margem esquerda pode ser aumentado ou diminuído dependendo de suas necessidades.
Embora recomendemos o método acima, o CSS de margem esquerda também pode ser adicionado embutido, conforme mostrado no exemplo abaixo.
<p style="margin-left:2.5em">An example of a 5em left margin.</p>
Um exemplo de uma margem esquerda de 5em.
Adicione espaço abaixo de uma linha ou parágrafo de texto
Se precisar adicionar espaço extra abaixo de uma linha ou parágrafo de texto, e só precisar fazer isso uma vez, você pode usar a tag
. Abaixo está um exemplo de como essa técnica pode ser aplicada.
<p>This sentence contains example text.<br> <br> As you can see, two breaks add the space above.</p>
O código acima cria o texto mostrado abaixo.
Esta frase contém um texto de exemplo.
Como você pode ver, duas quebras adicionam o espaço acima.
Pausas adicionais podem ser adicionadas, se necessário. No entanto, sugerimos usar o método CSS mencionado anteriormente para adicionar preenchimento e espaçamento ao redor do seu texto, se estiver sendo feito em vários lugares em uma página.
Adicionar espaçamento entre linhas de texto
O espaçamento entre as linhas do texto pode ser ajustado aumentando e diminuindo a altura da linha usando CSS para tornar o texto mais fácil de ler. Abaixo está um exemplo de espaçamento de linha extra adicionado a um parágrafo de texto.
<p style="line-height:3.5em;">Text shown below with extra spacing</p>
O código acima cria o texto mostrado abaixo.
Este texto de exemplo é um exemplo de como o espaço extra entre as linhas pode ser adicionado ao texto. No entanto, não recomendamos o uso de tanto espaço de linha porque torna mais difícil de ler. Estamos usando apenas esse espaçamento entre linhas como exemplo.
Em nosso exemplo acima, usamos 3,5 em como a altura da linha para ajudar a enfatizar o espaçamento entre as linhas. No entanto, para facilitar a leitura, recomendamos o uso de cerca de 1.7em. Adicionar algum espaçamento adicional entre as linhas sempre melhora a legibilidade do seu texto. No entanto, adicionar muito pode tornar mais difícil seguir e digitalizar.
0 Comments