los text-indent La propiedad CSS establece la longitud del espacio vacío (sangría) que se coloca antes de las líneas de texto en un bloque.

El espaciado horizontal es con respecto al borde izquierdo (o derecho, para el diseño de derecha a izquierda) del cuadro de contenido del elemento de nivel de bloque contenedor.

Sintaxis

/*  values */text-indent: 3mm;text-indent: 40px;/*  value
   relative to the containing block width */text-indent: 15%;/* Keyword values */text-indent: 5em each-line;text-indent: 5em hanging;text-indent: 5em hanging each-line;/* Global values */text-indent: inherit;text-indent: initial;text-indent: unset;

Valores

La sangría se especifica como absoluta . Se permiten valores negativos. Ver valores para posibles unidades.
La sangría es una del ancho del bloque contenedor.
each-line Esta es una API experimental que no debe usarse en código de producción.
La sangría afecta a la primera línea del contenedor de bloques, así como a cada línea después de un salto de línea forzado, pero no afecta a las líneas después de un rotura de envoltura suave.
hanging Esta es una API experimental que no debe usarse en código de producción.
Invierte qué líneas están sangradas. Todas las lineas excepto la primera línea tendrá sangría.

Definicion formal

Valor inicial 0
Se aplica a contenedores de bloque
Heredado sí
Porcentajes referirse al ancho del bloque contenedor
Valor calculado el porcentaje especificado o la longitud absoluta, más las palabras clave especificadas
Tipo de animación una longitud, porcentaje o calc ();

Sintaxis formal

&& hanging?&& each-line?
where 
 = |

Ejemplos de

Sangría simple

HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.p>

CSS

ptext-indent: 5em;background: powderblue;

Resultado

Omitir sangría en el primer párrafo

Una práctica tipográfica común cuando hay sangría de párrafo es omitir la sangría del primer párrafo. Como el El manual de estilo de Chicago dice, “la primera línea de texto que sigue a un subtítulo puede comenzar alineada a la izquierda o estar sangrada por la sangría de párrafo habitual”.

Se puede tratar los primeros párrafos de manera diferente a los párrafos siguientes utilizando el combinador de hermanos adyacente, como en el siguiente ejemplo:

HTML

<h2>Lorem ipsumh2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu
venenatis quam. Vivamus euismod eleifend metus vitae pharetra. In vel tempor metus.
Donec dapibus feugiat euismod. Vivamus interdum tellus dolor. Vivamus blandit eros
et imperdiet auctor. Mauris sapien nunc, condimentum a efficitur non, elementum ac
sapien. Cras consequat turpis non augue ullamcorper, sit amet porttitor dui
interdum.p><p>Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in,
tincidunt mattis ex. Praesent venenatis orci at sagittis eleifend. Nulla facilisi.
In feugiat vehicula magna iaculis vehicula. Nulla suscipit tempor odio a semper.
Donec vitae dapibus ipsum. Donec libero purus, convallis eu efficitur id, pulvinar
elementum diam. Maecenas mollis blandit placerat. Ut gravida pellentesque nunc, in
eleifend ante convallis sit amet.p><h2>Donec ullamcorper elit nislh2><p>Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce
tempor in ante gravida iaculis. Integer posuere tempor metus. Vestibulum lacinia,
nunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit vestibulum
nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Donec vulputate leo ut iaculis ultrices. Cras egestas rhoncus
lorem. Nunc blandit tempus lectus, rutrum hendrerit orci eleifend id. Ut at quam
velit.p><p>Aenean rutrum tempor ligula, at luctus ligula auctor vestibulum. Sed
sollicitudin velit in leo fringilla sollicitudin. Proin eu gravida arcu. Nam
iaculis malesuada massa, eget aliquet turpis sagittis sed. Sed mollis tellus ac
dui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan libero,
sed euismod ipsum ullamcorper sed.p>

CSS

ptext-align: justify;margin: 1em 0 0 0;p + ptext-indent: 2em;margin: 0;

Resultado

Sangría de porcentaje

HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.p>

CSS

ptext-indent: 30%;background: plum;

Resultado

Especificaciones

Especificación Estado Comentario
Módulo de texto CSS nivel 3
La definición de ‘sangría de texto’ en esa especificación.		 Recomendación candidata Agrega el hanging y each-line palabras clave.
CSS Nivel 2 (Revisión 1)
La definición de ‘sangría de texto’ en esa especificación.		 Recomendación El comportamiento con display: inline-block y las cajas de bloque anónimas se definen explícitamente.
Nivel 1 de CSS
La definición de ‘sangría de texto’ en esa especificación.		 Recomendación Definición inicial.

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
text-indent 1 12 1 3 3,5 1 ≤37 18 4 14 1 1.0
each-line No No No No No No No No No No No No
hanging No No No No No No No No No No No No

Ver también