Tabulaciones y espacios - Curso de CSS3 básico - Capítulo 11

En esta ocasión te mostraré como crear indentaciones (tabulaciones) en el texto y espacios en blanco.

Añadir tabulaciones al texto con CSS

Empecemos con esta hoja html:

Página HTML

Utilizo la clase "tabulado" en el primer párrafo. Por cierto, he visto que en el vídeo dejé el cierre de este párrafo como un cierre de enlace (</a>). Fallo mío, ignoraló como hace el navegador .

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Indentaciones y espacios con CSS</title>
    <link rel="stylesheet" href="test.css">
</head>

<body>
    <p class="tabulado">Este párrafo está tabulado.</p>
    <p>Este párrafo no está tabulado.</p>
</body>
</html>

CSS 

.tabulado {
    text-indent: 25px;
}

Ahora, el párrafo que tiene la clase, se queda con 25px de indentación.

Resultado en el navegador 

	Este párrafo está tabulado.

Este párrafo no está tabulado.

Añadir espaciado entre palabras con CSS

Gracias a la siguiente propiedad CSS, podemos determinar el espacio que se deja entre palabras.

Página HTML 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="test.css">
</head>

<body>
    <p class="espaciado">Quiere la boca exhausta vid, kiwi, piña y fugaz jamón. 
	Fabio me exige, sin tapujos, que añada cerveza al whisky. 
	Jovencillo emponzoñado de whisky, ¡qué figurota exhibes! 
	La cigüeña tocaba cada vez mejor el saxofón y el búho pedía 
	kiwi y queso. El jefe buscó el éxtasis en un imprevisto baño 
	de whisky y gozó como un duque. Exhíbanse politiquillos zafios, 
	con orejas kilométricas y uñas de gavilán. El cadáver de Wamba, 
	rey godo de España, fue exhumado y trasladado en una caja de zinc 
	que pesó un kilo. El pingüino Wenceslao hizo kilómetros bajo 
	exhaustiva lluvia y frío, añoraba a su querido cachorro. El 
	veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña 
	tocaba el saxofón detrás del palenque de paja.Quiere la boca 
	exhausta vid, kiwi, piña y fugaz jamón. Fabio me exige, sin 
	tapujos, que añada cerveza al whisky. Jovencillo emponzoñado 
	de whisky, ¡qué figurota exhibes! La cigüeña tocaba cada vez 
	mejor el saxofón y el búho pedía kiwi y queso. El jefe buscó 
	el éxtasis en un imprevisto baño de whisky y gozó como un duque. 
	Exhíbanse politiquillos zafios, con orejas kilométricas y uñas de 
	gavilán. El cadáver de Wamba, rey godo de España, fue</p>
</body>
</html>

CSS 

.espaciado {
    word-spacing:50px;
    font-size:25px;
}

Resultado en el navegador

word spacing en css

Añadir espaciado entre letras con CSS

Otra de las cosas que se pueden hacer con CSS para manipular el texto, es utilizar la siguiente propiedad capaz de establecer una determinada separación para cada una de las letras de un texto.

CSS 

.espaciado {
    font-size:25px;
    letter-spacing: 10px;
}

Resultado en el navegador

word spacing en css

Añadir espaciado entre líneas con CSS

Para terminar con este capítulo, veamos como se aplica el espaciado entre líneas de texto.

CSS 

.espaciado {
    font-size:25px;
    line-height: 100px;
}
line-height en css

En el vídeo tienes muchos más ejemplos de uso de estas propiedades CSS.

Capítulos

    Suscríbete a mi canal de YouTube para apoyarme

    Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

    Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

    No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.