Propiedad text-indent

Ejemplos de uso

La propiedad text-indent indica la tabulación o indentación que se aplica a la primera línea de texto de un elemento. El tamaño de la tabulación se puede indicar con cualquiera de las unidades de medida definidas por CSS y puede ser positivo o negativo:

Algunos sitios web cuyos contenidos son bloques largos de texto (como por ejemplo periódicos, revistas o libros publicados como webs) utilizan la propiedad text-indent para mostrar sus contenidos siguiendo el estilo tradicional de los libros: sin separación vertical entre párrafos y aplicando una indentación a todos ellos salvo al primero:

Los estilos CSS aplicados en el ejemplo anterior son los siguientes:

p {
    margin-bottom: 0;
}
p + p {
    text-indent: 1.5em;
}

Al espacio en blanco dejado por la indentación no se le puede aplicar ningún estilo, tales como un color de fondo o un borde.

A pesar de que el uso principal de la propiedad text-indent es la tabulación de párrafos de texto, también es la base de una de las técnicas más utilizadas en las páginas HTML.

¿Cómo mostrar bien el logotipo de una empresa o institución en su página web? Incluir solamente la imagen del logotipo no es suficiente, ya que puede afectar al SEO del sitio y a su accesibilidad. Incluir el nombre de la empresa en forma de texto no es viable, ya que la mayoría de logotipos son imágenes.

La solución a este problema es muy sencilla y se basa en el uso de la propiedad text-indent. Utiliza en primer lugar el siguiente código HTML, reemplazando Acme.com por el nombre de tu empresa o institución:

<h1 id="logo">
    <a href="/">Acme.com</a>
</h1>

El código anterior hace que el nombre de la empresa o institución aparezca escrito en forma de texto, lo que es bueno para el SEO y la accesibilidad. A continuación, aplica los siguientes estilos CSS:

#logo {
    height: 100px;
    width: 250px;
}
#logo a {
    background: url("/imagenes/logo.png") no-repeat;
    display: block;
    overflow: hidden;
}

Después de aplicar los estilos, el logotipo ya se ve de forma gráfica gracias a la imagen insertada por la propiedad background. El problema es que ahora mismo el nombre de la empresa se muestra en forma de texto por encima de la imagen de su logotipo.

Para solucionarlo, añade la siguiente propiedad text-indent al logotipo:

#logo a {
    ...
    text-indent: -9999px;
}

El valor -9999px hace que el texto (es decir, el nombre de la empresa) se desplace casi 10.000 píxeles hacia la izquierda de su posición original. En la práctica, esto supone que el texto desaparece completamente de la pantalla y en su lugar solamente se ve la imagen de fondo, es decir, el logotipo de la empresa.

De esta forma, el código completo para mostrar correctamente el logotipo de una empresa en su página web es el siguiente:

<h1 id="logo">
    <a href="/">Acme.com</a>
</h1>

#logo {
    height: 100px;
    width: 250px;
}
#logo a {
    background: url("/imagenes/logo.png") no-repeat;
    display: block;
    overflow: hidden;
    text-indent: -9999px;
}