Cómo crear una sangría francesa Con CSS

Cómo crear una sangría francesa con CSS. Un elemento a nivel de bloque HTML como un párrafo puede ser de estilo con una sangría francesa. El elemento que se diseñará necesita contener más de una línea. Los siguientes pasos se explica cómo crear una sangría francesa con CSS.

Instrucciones

1 Crear la sangría francesa mediante la propiedad de texto guión combinado con padding-left. Lo mejor es asignar la regla CSS al párrafo u otro elemento de uso de una clase. He aquí un ejemplo de clase llamada cuelga-guión:

.hanging-guión {
text-indent: -25px;
padding-left: 25px;
}

2 Tenga en cuenta que la cantidad real de texto-guión se da como un número negativo; en este caso es -25px. A continuación se da una segunda regla para padding-left; en este caso es 25 píxeles. Estos dos valores no tienen que coincidir. Lo único que debe hacer es utilizar un número negativo para el texto-guión y un valor positivo para padding-left.

3 Los párrafos de la barra lateral en el lado derecho de la página en la imagen muestran el efecto. Cada párrafo en la barra lateral derecha se asigna a la clase mostrado arriba .hanging-guión.

4 Si ha añadido un borde a la regla, la frontera rodearía la totalidad del elemento de bloque (ver imagen).