Hay varias formas de hacer que una página web sea más fácil de leer, navegar y digerir. Agregar imágenes es una gran manera. Las tapas desplegables también pueden funcionar.
La sangría es otra técnica de formato que puede ayudarlo a organizar y presentar su contenido en una página. Si bien es mucho más común en la impresión, los párrafos, las listas y las viñetas se pueden usar para desglosar el contenido de las páginas web y facilitar su lectura.
En esta publicación, repasaremos cómo puede sangrar las cosas con un poco de código. Discutiremos:
CSS con sangría de texto
La propiedad text-indent de CSS establece la sangría de la primera línea en un bloque de texto. Se puede definir por valores positivos o negativos. Si el valor es positivo, la primera línea se sangrará a la derecha. Si el valor es negativo, la primera línea estará a la izquierda.
Puede usar valores de longitud o porcentajes para establecer la propiedad de sangría de texto en CSS. Los valores de longitud como px, pt y em definen una longitud fija de espacio vacío. Los porcentajes definirán la sangría como un porcentaje del ancho del padre.
Echemos un vistazo a cómo usar esta propiedad CSS para sangrar texto, párrafos, listas y más.
Cómo sangrar texto en CSS
Puede usar la propiedad text-indent de CSS para aplicar sangría al texto en cualquier contenedor de bloque, incluidos divs, encabezados, lados, artículos, citas en bloque y elementos de lista.
Suponga que desea aplicar una sangría de 50 píxeles a todos los div que contengan texto en el lado derecho. Luego, usando un selector div de CSS, establezca la propiedad de sangría de texto en 50px. Aquí está el resultado:
ver la pluma de Christina Perricone (@hubspot) en CódigoPen.
Cómo sangrar párrafos en CSS
Puede usar la propiedad text-indent de CSS para sangrar párrafos siguiendo los mismos pasos anteriores.
Simplemente use el selector de tipo CSS y p y establezca la propiedad de sangría de texto en el valor que desee. En el siguiente ejemplo, usemos un porcentaje. De forma predeterminada, solo se sangra la primera línea.
ver la pluma Cómo sangrar párrafos en CSS de Christina Perricone (@hubspot) en CódigoPen.
Cómo suprimir la sangría del primer párrafo
De acuerdo a manual de estilo chicagopuede sangrar la primera línea de texto después del subtítulo o dejarlo a la izquierda.
Si desea dejar el primer párrafo detrás del subtítulo a la izquierda, pero sangrar cada párrafo subsiguiente, puede usar el combinador de hermanos adyacente: p + p. Luego establezca la propiedad text-indent en un valor apropiado. Aquí está el resultado:
ver la pluma de Christina Perricone (@hubspot) en CódigoPen.
Cómo crear una lista de sangría en CSS
Elemento de lista ordenada (
- ) sangrará los elementos de la lista de forma predeterminada. Si desea cambiar la distancia de sangría, puede usar CSS. En ese caso, no usará la propiedad text-indent. En su lugar, utilizará las propiedades margin-left o padding-left.
Suponga que desea mover los elementos de la lista más hacia la derecha para que aparezcan alineados con el subtítulo. Luego puede establecer la propiedad padding-left en 20em. Aquí está el resultado comparado con la lista con la sangría por defecto:
ver la pluma de Christina Perricone (@hubspot) en CódigoPen.
Cómo sangrar puntos con viñetas en CSS
Al igual que un elemento de lista ordenado, un elemento de lista desordenado (
- ) sangrará los elementos de la lista, o las viñetas de forma predeterminada. Si desea cambiar la distancia de la sangría, puede usar las propiedades margin-left o padding-left.
Suponga que desea mover las viñetas más a la izquierda, no a la derecha. Luego puede usar la propiedad margin-left y establecerla en un valor negativo. Aquí está el resultado en comparación con las viñetas sangradas predeterminadas:
ver la pluma de Christina Perricone (@hubspot) en CódigoPen.
La sangría de texto no funciona
Pueden surgir problemas cuando intenta aplicar la propiedad de sangría de texto a elementos HTML. El problema más común es tratar de aplicar esta propiedad a elementos integrados en lugar de elementos de bloque. Por ejemplo, si intenta sangrar la extensión, la propiedad no funcionará. Pero funcionará si aplica la propiedad a un elemento de párrafo u otro elemento de bloque. Aquí hay un ejemplo:
ver la pluma La sangría de texto no funciona de Christina Perricone (@hubspot) en CódigoPen.
Sangría en CSS
La sangría es una técnica de formato que puede mejorar la legibilidad de sus páginas web. Si bien es mucho más común verlo impreso, aún es importante comprender cómo sangrar o cambiar la sangría de párrafos, listas y viñetas en línea. La buena noticia es que solo se necesita un poco de HTML y CSS para dominar.
