Sangría y espaciado de texto CSS

Tabla de contenido

Espaciado del texto

En este capítulo aprenderá sobre las siguientes propiedades:

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

Sangría de texto

La propiedad text-indent se utiliza para especificar la sangría de la primera línea de un texto:

Ejemplo

p {
  text-indent: 50px;
}

Pruébelo usted mismo →

<!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>

Espaciado de letras

La propiedad espaciado entre letras se utiliza para especificar el espacio entre los caracteres de un texto.

El siguiente ejemplo demuestra cómo aumentar o disminuir el espacio entre caracteres:

Ejemplo

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

Pruébelo usted mismo →

<!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 de la línea

La propiedad line-height se utiliza para especificar el espacio entre líneas:

Ejemplo

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

Pruébelo usted mismo →

<!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>

Espaciado de palabras

La propiedad word-spacing se utiliza para especificar el espacio entre las palabras en un texto.

El siguiente ejemplo demuestra cómo aumentar o disminuir el espacio entre palabras:

Ejemplo

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

Pruébelo usted mismo →

<!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>

Espacio en blanco

La propiedad espacio en blanco especifica cómo se manejan los espacios en blanco dentro de un elemento.

Este ejemplo demuestra cómo deshabilitar el ajuste de texto dentro de un elemento:

Ejemplo

 p {
  white-space: nowrap;
}

Pruébelo usted mismo →

<!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>

Las propiedades de espaciado del texto CSS

letter-spacing: Especifica el espacio entre caracteres en un texto.
line-height: Especifica la altura de la línea.
text-indent: Especifica la sangría de la primera línea en un bloque de texto.
white-space: Especifica cómo manejar los espacios en blanco dentro de un elemento.
word-spacing: Especifica el espacio entre palabras en un texto.