Como criar espaço extra em HTML ou página da web


0

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

Espaço inquebrável

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
Observação

Se você estiver usando um editor WYSIWYG para inserir o código acima, deverá estar na guia HTML ou editando o código HTML.

Gorjeta

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     spaces

O exemplo acima é feito usando o código HTML abaixo.

<pre class="tab">This    text      has    lots of     spaces</pre>
  • Veja nossa página de tag HTML
     para mais informações sobre esta tag.
Observação

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.

Preenchimento

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.

  • Como faço para recuar ou tabular o texto na minha página da web ou em HTML?

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.


Like it? Share with your friends!

0

What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Rubem Rego

0 Comments

Your email address will not be published. Required fields are marked *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format