Recuo e espaçamento de texto CSS

Índice

Espaçamento de texto

Neste capítulo você aprenderá sobre as seguintes propriedades:

text-indent
letter-spacing
line-height
word-spacing
white-space

Recuo de texto

A propriedade text-indent é usada para especificar o recuo da primeira linha de um texto:

Exemplo

p {
  text-indent: 50px;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-indent: 50px;
}
</style>
</head>
<body>

<h1>Using text-indent</h1>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

</body>
</html>

Espaçamento entre letras

A propriedade letter-spacing é usada para especificar o espaço entre os caracteres em um texto.

O exemplo a seguir demonstra como aumentar ou diminuir o espaço entre os caracteres:

Exemplo

h1 {
  letter-spacing: 5px;
}
h2 {
  letter-spacing: -2px;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
  letter-spacing: 5px;
}

h3 {
  letter-spacing: -2px;
}
</style>
</head>
<body>

<h1>Using letter-spacing</h1>

<h2>This is heading 1</h2>
<h3>This is heading 2</h3>

</body>
</html>

Altura da linha

A propriedade line-height é usada para especificar o espaço entre as linhas:

Exemplo

p.small {
  line-height: 0.8;
}
p.big {
  
line-height: 1.8;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p.small {
  line-height: 0.7;
}

p.big {
  line-height: 1.8;
}
</style>
</head>
<body>

<h1>Using line-height</h1>

<p>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>

<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>

<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>

</body>
</html>

Espaçamento entre palavras

A propriedade word-spacing é usada para especificar o espaço entre as palavras de um texto.

O exemplo a seguir demonstra como aumentar ou diminuir o espaço entre palavras:

Exemplo

 p.one {
  word-spacing: 10px;
}
p.two {
  word-spacing: -2px;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  word-spacing: 10px;
}

p.two {
  word-spacing: -2px;
}
</style>
</head>
<body>

<h1>Using word-spacing</h1>

<p>This is a paragraph with normal word spacing.</p>

<p class="one">This is a paragraph with larger word spacing.</p>

<p class="two">This is a paragraph with smaller word spacing.</p>

</body>
</html>

Espaço em branco

A propriedade white-space especifica como o espaço em branco dentro de um elemento é tratado.

Este exemplo demonstra como desativar a quebra automática de texto dentro de um elemento:

Exemplo

 p {
  white-space: nowrap;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  white-space: nowrap;
}
</style>
</head>
<body>

<h1>Using white-space</h1>

<p>
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
</p>

<p>Try to remove the white-space property to see the difference!</p>

</body>
</html>

As propriedades de espaçamento de texto CSS

letter-spacing: Especifica o espaço entre os caracteres em um texto
line-height: Especifica a altura da linha
text-indent: Especifica o recuo da primeira linha em um bloco de texto
white-space: Especifica como lidar com espaços em branco dentro de um elemento
word-spacing: Especifica o espaço entre as palavras em um texto