Espacio entre divisiones HTML: margin, padding, gap y Flexbox

Para dejar espacio entre varias divisiones HTML, la solución habitual es utilizar la propiedad CSS margin, que crea separación fuera de cada elemento. Si el espacio debe aparecer dentro de una división, entre su contenido y su borde, se utiliza padding; cuando varias divisiones forman un contenedor Flexbox o Grid, la propiedad gap permite controlar directamente la distancia entre ellas.

Agregar espacios directamente en el código HTML no suele ser una solución fiable, porque los navegadores colapsan varios espacios consecutivos en uno solo. El HTML debe definir la estructura y el significado del contenido, mientras que CSS debe controlar la separación, el tamaño, la alineación y la presentación visual.

Por qué los espacios HTML se colapsan

Agregar espacios adicionales dentro de tu código HTML es la forma más sencilla de crear separación entre palabras o elementos. Sin embargo, los navegadores web tienen su propia manera de renderizar el espacio en blanco.

Los navegadores colapsan múltiples espacios: Si escribes cinco espacios seguidos dentro de tu HTML, el navegador generalmente lo renderizará como un solo espacio en la página web. Este comportamiento está diseñado para facilitar la adaptación del texto a diferentes tamaños de pantalla y dispositivos.

Por ejemplo, imagina que intentas agregar espacios adicionales entre palabras en una oración dentro de un párrafo de texto. Cuando veas ese texto en un navegador web, es probable que los espacios adicionales desaparezcan, dejándote con el espaciado regular de palabras.

Esto puede ser frustrante cuando necesitas un control preciso sobre el diseño o formato de tu contenido. Afortunadamente, hay formas mucho mejores de dominar el espaciado en HTML, dándote los resultados exactos que deseas.

La diferencia entre espacio en HTML y espacio entre elementos

Los espacios en HTML son el espacio visual que separa palabras, caracteres, líneas o elementos. Aunque parecen algo sencillo, su manejo puede ser confuso, ya que HTML tiene reglas específicas para interpretar los espacios.

Por ejemplo, los navegadores eliminan automáticamente los espacios adicionales entre palabras, dejando solo un espacio, independientemente de cuántos añadas en tu código HTML. Esto significa que, si necesitas controlar el espaciado en tu documento HTML, debes usar métodos específicos como entidades de espacio o propiedades CSS.

Entender este concepto es clave para evitar problemas de diseño y garantizar que tu contenido se vea exactamente como lo planeaste. La separación entre divisiones, secciones, tarjetas, encabezados o imágenes debe resolverse normalmente con propiedades de diseño y espaciado, no mediante espacios escritos en el marcado.

Cómo dejar espacio entre divs con margin

Si deseas agregar espacio al exterior de un elemento, usas la propiedad margin. El margen es como agregar un cojín alrededor del elemento.

La propiedad margin es la abreviatura de margin-top, margin-right, margin-bottom y margin-left. La abreviatura margin aplica propiedades en un orden particular: arriba, derecha, abajo e izquierda.

Los márgenes son el método principal para crear separación visual entre bloques de contenido, secciones, encabezados, imágenes y más. También juegan un papel crucial en la definición de la estructura general y el «espacio en blanco» de un sitio web.

Valores de margin

En CSS, puede establecer márgenes usando la propiedad margin. margin: 20px; aplica un margen de 20 píxeles en todos los lados.

margin: 10px 25px; establece un margen de 10 píxeles arriba y abajo, y un margen de 25 píxeles a izquierda y derecha.

margin: 5px 10px 15px 20px; establece márgenes individuales para arriba, derecha, abajo e izquierda en orden de las agujas del reloj.

La abreviatura margin también se puede usar con uno, dos o tres valores. Agregar un cuarto valor te permite configurar cada lado individual.

El margen puede definirse con una longitud, porcentaje o valor automático, como 1em o 20%. Si usas un porcentaje, el valor se calculará en función del ancho del bloque contenedor de tu elemento.

Esto significa que, si el bloque contenedor de tu elemento tiene un ancho de 250px y tu elemento tiene un valor margin de 20%, cada lado de tu elemento tendrá un margen calculado de 50px.

Ejemplo básico para separar divisiones

El siguiente ejemplo aplica una separación exterior a tres divisiones:

#div1, #div2, #div3 { background-color: #f4f4f4; margin: 5px; width: 50px; height: 80px;}

Para separar únicamente las divisiones apiladas verticalmente, puede utilizarse el margen inferior o superior en lugar de aplicar el mismo margen en todos los lados:

.container { margin-bottom: 20px;}

Cuando se desea eliminar el margen de un lado, si el valor es 0 no es necesario especificar ninguna unidad de medida.

#div2 { margin-top: 0; margin-bottom: 0;}

Margin y padding: cuál usar

El margen es el espacio fuera del borde de un elemento, separándolo de otros elementos. El relleno es el espacio entre el contenido de un elemento y su borde.

En lugar de crear espacio en el exterior de la caja, como lo hace margin, la propiedad padding crea espacio en el interior del cuadro.

El relleno evita que el texto u otro contenido se acerque demasiado a los bordes de su contenedor, mejorando la legibilidad y el confort visual.

Si un elemento tiene un color de fondo o una imagen, el relleno es donde ese fondo será visible. Al aplicar un relleno más grande, puede hacer que un elemento parezca más grande y más prominente.

Ejemplo de padding

Al igual que los márgenes, puede controlar el relleno usando la propiedad padding en CSS. La sintaxis es la misma:

padding: 20px;

Esta declaración aplica un relleno de 20 píxeles en todos los lados.

padding: 10px 25px;

Esta declaración establece un relleno de 10 píxeles arriba y abajo, y un relleno de 25 píxeles a izquierda y derecha.

padding: 5px 10px 15px 20px;

Esta declaración establece rellenos individuales para arriba, derecha, abajo e izquierda en orden de las agujas del reloj.

Recuerde, los márgenes colocan espacio fuera de un elemento, mientras que el relleno crea espacio dentro de él. Cuando se aplican tanto margen como relleno, el espacio total entre los elementos es una combinación de ambos.

Además, el fondo del elemento se extiende al área de su relleno.

La contracción de márgenes verticales

La contracción del margen es un concepto engañoso, pero es algo con lo que te encontrarás muy comúnmente cuando compiles interfaces.

Supongamos que tienes dos elementos, un encabezado y un párrafo, ambos tienen un margen vertical:

h1 { margin-bottom: 2rem;}p { margin-top: 3rem;}

A primera vista, se te perdona pensar que el párrafo estará separado del encabezado 5rem porque la combinación de 2rem y 3rem se calcula como 5rem.

Sin embargo, debido a que el margen vertical se contrae, el espacio en realidad es 3rem. La contracción de márgenes funciona seleccionando el valor más grande de dos elementos contiguos con un margen vertical en los lados contiguos.

La parte inferior de h1 se une con la parte superior de p, para que se seleccione el valor más alto del margen inferior de h1 y el margen superior de p. Si las h1 tuvieran un 3.5rem de margen inferior, el espacio entre ambos sería 3.5rem porque es mayor que 3rem.

Solo los márgenes de bloqueo se contraen, no los márgenes intercalados horizontales. La contracción de márgenes también ayuda con los elementos vacíos.

Si tienes un párrafo con un margen inferior y superior de 20px, Solo creará 20px de espacio, no 40px. Sin embargo, si se agrega algo dentro de este elemento, incluido padding, su margen ya no se contraerá y se tratará como cualquier cuadro con contenido.

Cómo evitar la contracción del margen

Si haces que un elemento esté absolutamente posicionado, si usas position: absolute, el margen ya no se contraerá. El margen tampoco se contraerá si también usas la propiedad float.

Si tienes un elemento sin margen entre dos elementos con margen de bloque, el margen tampoco se contraerá, porque los dos elementos con margen de bloque ya no son hermanos adyacentes: solo son elementos del mismo nivel.

En la lección de diseño, aprendió que los contenedores de flexbox y cuadrícula son muy similares a los contenedores de bloques pero manejan sus elementos secundarios de forma muy diferente. Este también es el caso de la contracción de los márgenes.

Si tomamos el ejemplo original de la lección y aplicamos flexbox con dirección de columna, se combinan los márgenes, en lugar de contraerse. Esto puede proporcionar previsibilidad con el trabajo de diseño, para los que se diseñaron los contenedores flexbox y grid.

Cómo usar gap entre divisiones

Para crear espacio entre cuadros, puede utilizar la propiedad gap. Tanto en cuadrícula como en Flexbox, puedes usar la propiedad gap para crear espacio entre elementos secundarios.

La propiedad gap es una abreviatura de row-gap y column-gap. Acepta uno o dos valores, que pueden ser longitudes o porcentajes.

.contenedor { display: flex; gap: 20px;}

Si defines solo un valor, se aplicará la misma gap a las filas y columnas, pero si defines ambos valores, el primer valor es row-gap y el segundo es column-gap.

.contenedor { display: flex; row-gap: 10px; column-gap: 20px;}

La propiedad gap es especialmente útil cuando una colección de cajas se apila una encima de la otra y queremos que haya espacio entre ellas. La propiedad margin podría ofrecerte lo que necesitas, pero también puede agregar espacios adicionales que no deseas.

Por ejemplo, gap permite orientarse solo al espacio entre cada uno de esos elementos. Hay muchas maneras de ajustar el espaciado dentro de una IU, cada uno con sus propias fortalezas y advertencias.

También puedes utilizar palabras clave como unset, initial y inherit.

Separar divisiones con Flexbox

Flexbox, abreviatura de Flexible Box Layout, es un módulo de diseño CSS que revolucionó la forma en que creamos diseños flexibles y responsivos. Ofrece herramientas poderosas para alinear y distribuir espacio dentro de contenedores.

Una alternativa es utilizar Flexbox para la alineación de los elementos:

.contenedor-principal { display: flex;}.contenedor-secundario { width: 33.33%;}

La distribución flexible permite que propiedades como justify-content distribuyan espacio entre elementos flex fácilmente. Por ejemplo, justify-content: space-around agregará un espaciado igual entre elementos, mientras que justify-content: space-between distribuirá los elementos lo más lejos posible dentro del contenedor.

La propiedad align-items controla la alineación a lo largo del eje secundario del contenedor Flexbox. Esto te permite centrar elementos verticalmente dentro de un contenedor o alinearlos al borde superior o inferior, creando diversas opciones de espaciado.

Los diseños Flexbox se adaptan elegantemente a diferentes tamaños de pantalla, reorganizando automáticamente los elementos y su espaciado según sea necesario.

Flexbox puede simplificar muchos escenarios de diseño que tradicionalmente eran difíciles con técnicas más antiguas, a menudo requiriendo menos código y menos «trucos» de espaciado.

Propiedades esenciales de Flexbox

• justify-content: Controla la distribución del espacio a lo largo del eje principal del contenedor Flexbox.
• align-items: Controla la alineación a lo largo del eje transversal.
• flex-direction: Establece si los elementos se disponen en una fila o columna.
• flex-wrap: Determina si los elementos deben envolverse en múltiples líneas.
• gap: Crea una separación uniforme entre los elementos secundarios.

En un contenedor vertical, puedes establecer flex-direction: column y utilizar gap para definir la distancia entre divisiones:

.contenedor { display: flex; flex-direction: column; gap: 20px;}

Nota: Flexbox tiene un poco más que aprender que simples márgenes y relleno, ¡pero vale la pena entenderlo!

Separar divisiones con CSS Grid

CSS Grid es otra herramienta de diseño poderosa. Es mejor conocida por crear diseños complejos de cuadrícula bidimensional, pero también ofrece formas sencillas de gestionar el espaciado entre elementos dentro de la cuadrícula.

Otra alternativa es utilizar CSS Grid o Grid Layout para la alineación de los elementos.

.contenedor-principal { display: grid; gap: 20px;}

grid-gap establece el espaciado entre filas y columnas de la cuadrícula, creando un espacio uniforme. Por ejemplo, grid-gap: 20px; crea un espacio de 20 píxeles entre todos los elementos de la cuadrícula.

También puedes ajustar márgenes, relleno y propiedades de alineación en elementos individuales de la cuadrícula, ofreciendo una combinación de control general del espaciado y ajuste fino para elementos específicos.

CSS Grid sobresale cuando tienes en mente un diseño claro de estilo cuadrícula. Para arreglos más simples, Flexbox o incluso técnicas tradicionales de espaciado con márgenes y relleno pueden ser más apropiadas.

El espacio no deseado con display: inline-block

Cuando trabajamos con elementos en línea-bloque display: inline-block; en HTML y CSS, es posible que te encuentres con el problema del espacio no deseado entre estos elementos.

Los elementos en línea-bloque, como divs con la propiedad display: inline-block;, pueden presentar un espacio adicional entre ellos. Este espacio puede causar que los elementos se visualicen en líneas separadas en lugar de estar uno al lado del otro.

<div class="container"> <!-- Contenido del primer contenedor --></div><div class="container"> <!-- Contenido del segundo contenedor --></div><div class="container"> <!-- Contenido del tercer contenedor --></div>

El espacio aparece porque el navegador interpreta los saltos de línea y los espacios existentes entre las etiquetas inline-block como espacios de texto.

Solución mediante comentarios HTML

Una solución es utilizar comentarios HTML para eliminar el espacio que se incluye por defecto entre los elementos div. Esto se logra insertando comentarios entre los elementos.

<div class="container"> <!-- Contenido del primer contenedor --></div><!-- --><div class="container"> <!-- Contenido del segundo contenedor --></div><!-- --><div class="container"> <!-- Contenido del tercer contenedor --></div>

Esta solución complica el código, por lo que es mejor optar por otras alternativas.

Solución mediante el tamaño de fuente

Otra alternativa es ajustar el tamaño de fuente de html y body a cero para eliminar el espacio en blanco, y luego restaurar el tamaño de fuente deseado para el contenido dentro de los contenedores.

html, body { font-size: 0;}.container { display: inline-block;}

Esta técnica puede resolver el espacio textual entre elementos inline-block, pero puede afectar a otros contenidos descendientes si no se restaura cuidadosamente el tamaño de fuente.

Solución mediante flotantes

Otra alternativa es utilizar flotantes para la alineación de los elementos.

.container { float: left;}

Los flotantes fueron una solución frecuente para colocar elementos en una misma línea, aunque Flexbox y CSS Grid suelen ofrecer un control más claro sobre la alineación, el espaciado y la adaptación a diferentes tamaños de pantalla.

Solución mediante Flexbox o Grid

De forma general, lo ideal será descartar el uso de comentarios o el ajuste del tamaño de fuente y optar por alternativas como el uso de Flexbox o CSS Grid.

Asegúrate de que la solución elegida sea compatible con los navegadores que necesitas soportar. En proyectos modernos, la compatibilidad con versiones antiguas puede ser menos crítica.

Como ves, seleccionar la mejor forma de abordar el espacio adicional con display: inline-block; depende del contexto del proyecto y de las necesidades específicas de compatibilidad y mantenimiento del código.

Entidades HTML para crear espacios

Además de usar elementos HTML, las entidades HTML pueden crear espacio. Una entidad HTML es una cadena reservada de caracteres que el navegador reemplaza por entidades de caracteres.

Por ejemplo: Si escribieras © en tu archivo HTML, se convertiría en un carácter ©. La entidad   se convierte en un carácter de espacio de no separación, que proporciona un espacio intercalado.

Espacio no separable:  

El espacio no separable es tu arma secreta para evitar que las palabras se rompan automáticamente al final de una línea. Se representa en HTML usando la entidad especial  .

Piensa en él como el pegamento que mantiene dos palabras juntas, asegurando que siempre aparezcan lado a lado.

El espacio estándar, representado por  , es una entidad especial que añade un espacio fijo entre dos elementos o palabras. Se usa principalmente cuando no quieres que los navegadores eliminen espacios adicionales o cuando deseas evitar que las palabras se dividan en líneas diferentes.

<p>Hola &nbsp; Mundo</p>

En este caso, el espacio añadido entre “Hola” y “Mundo” será fijo y no se verá afectado por las reglas de colapso de HTML.

Este método es especialmente útil en contextos donde necesitas un espaciado consistente, como en tablas, menús o botones.

• Preservar pares de palabras: Por ejemplo, podrías querer mantener juntos títulos como «Dr. Smith» o asegurar que un precio y un símbolo de moneda no se separen, por ejemplo, «$100».
• Prevenir saltos de línea incómodos: A veces, una sola palabra puede ser empujada a la siguiente línea, dejando un espacio distractor. Un espacio no separable puede mantener esa palabra con el resto de la oración.
• Crear espaciado intencional: Puedes usar múltiples entidades seguidas para insertar más de un solo espacio, pero recuerda que hay mejores maneras de manejar necesidades de espaciado más grandes.

Sin embargo, ten cuidado, porque el aspecto de no ruptura de este personaje une los dos elementos, lo que puede provocar comportamientos extraños.

Para usar un espacio no separable, simplemente inserta   donde quieras que aparezca el espacio inquebrantable.

Espacios horizontales

Los espacios  ,   y   son variaciones del espacio estándar y permiten ajustar el tamaño del espaciado entre elementos.

•  : Espacio grande, equivalente al ancho de una letra “M” en la fuente actual.
•  : Espacio mediano, aproximadamente la mitad del tamaño de un  .
•  : Espacio pequeño, ideal para tipografía ajustada o elementos muy cercanos.

<p>Texto &emsp; con &ensp; diferentes &thinsp; espacios.</p>

En este caso, cada tipo de espacio crea un efecto visual diferente, ideal para diseños más personalizados.

Cuándo utilizar br y hr

La etiqueta <br> se utiliza para crear un salto de línea, lo que también genera un espacio vertical entre los elementos. Es útil para separar contenido en líneas diferentes sin necesidad de usar CSS.

<p>Primera línea<br>Segunda línea</p>

Si usas un elemento <br>, se creará un salto de línea como si presionara la tecla Intro en un procesador de texto.

Sin embargo, se recomienda usar <br> con moderación, ya que abusar de esta etiqueta puede generar problemas de accesibilidad y mantenimiento del código.

Trate de usar con moderación <br> etiquetas. A menudo, hay formas más apropiadas semánticamente de estructurar su contenido, que cubriremos a continuación con párrafos (<p>).

El elemento <hr> crea una línea horizontal con espacio a ambos lados, conocida como margin.

Los elementos <br> y <hr> te permiten espaciar los elementos en la dirección del bloque, que, si usas un idioma de origen latino, es de arriba a abajo.

La etiqueta p y el espacio entre párrafos

La humilde etiqueta <p> es la columna vertebral de la organización del contenido en las páginas web. Define un párrafo, un bloque de texto distinto visualmente separado de otros bloques en la página.

Los navegadores insertan automáticamente un espacio, generalmente en forma de margen vertical, arriba y abajo de cada párrafo, dando estructura y espacio a su contenido.

• Legibilidad: Los párrafos dividen grandes bloques de texto en partes manejables, haciendo que su contenido sea más fácil de escanear y digerir.
• Significado semántico: Usar etiquetas <p> le dice a los navegadores y motores de búsqueda que esta es una unidad de contenido distinta, mejorando cómo las máquinas entienden la estructura de su página.
• Control de estilo: Con CSS, puede aplicar estilos a los párrafos, como fuentes personalizadas, tamaños de texto, colores y más.

Usar etiquetas de párrafo es simple. Envuelva cada párrafo de su texto con etiquetas de apertura <p> y cierre </p>.

No use etiquetas <p> simplemente para insertar espacio. CSS ofrece herramientas mucho más poderosas y precisas para controlar el espaciado alrededor de los elementos en su página.

Propiedades de texto para controlar el espaciado

CSS ofrece una colección de propiedades diseñadas explícitamente para controlar cómo se espacian y formatean los textos dentro de los elementos.

text-indent

Esta propiedad indenta la primera línea de texto dentro de un elemento de nivel de bloque, como un párrafo. Se usa comúnmente para crear el estilo tradicional de sangría de párrafo.

text-indent: 30px;

Esta declaración indenta la primera línea de un párrafo en 30 píxeles.

line-height

Esta propiedad establece el espaciado vertical entre líneas de texto, también conocido como interlineado. Un valor de altura de línea más grande aumenta el espacio entre líneas, haciendo que el texto sea más fácil de leer.

line-height: 1.6;

Esta declaración establece la altura de línea en 1.6 veces el tamaño de la fuente, proporcionando un espaciado amplio.

p { line-height: 2;}

Este código asegura que las líneas tengan el doble de la altura del tamaño del texto, creando un espacio vertical claro.

word-spacing

Controla la cantidad de espacio entre palabras. Usa esto para aumentar o disminuir los espacios horizontales entre palabras.

word-spacing: 5px;

Esta declaración agrega 5 píxeles de espacio extra entre cada palabra.

h1 { word-spacing: 10px;}

Este código añade un espaciado de 10 píxeles entre las palabras dentro de un encabezado <h1>.

letter-spacing

La propiedad letter-spacing controla el espaciado entre caracteres en un texto. Es ideal para ajustar la legibilidad y el diseño tipográfico.

letter-spacing: 2px;

Esta declaración aumenta el espacio entre letras en 2 píxeles.

p { letter-spacing: 3px;}

Este código añade un espacio adicional de 3 píxeles entre cada letra dentro de un párrafo.

white-space

Esta propiedad dicta cómo un navegador maneja los espacios en blanco dentro del contenido de un elemento.

• normal: Comportamiento predeterminado; colapsa múltiples espacios.
• nowrap: Evita que el texto se ajuste a nuevas líneas, incluso si significa desbordar el contenedor.
• pre: Similar a la etiqueta <pre>, preserva todos los espacios en blanco.
• pre-line: Colapsa espacios como normal pero preserva los saltos de línea.

Las propiedades de texto se pueden aplicar a párrafos, encabezados y otros elementos de texto para ajustar su apariencia. Experimenta libremente para encontrar el equilibrio perfecto para tu contenido.

Unidades CSS para definir el espacio

En una página web o en una hoja de estilo se pueden definir las distancias o tamaños como porcentajes o como valores numéricos, absolutos o relativos.

Los porcentajes se escriben con el símbolo de porcentaje pegado al valor numérico, sin espacio entre ellos. Por ejemplo, 100%, 50%, etc.

Los valores numéricos pueden ser positivos o negativos, enteros o decimales, utilizando el punto como separador de las partes entera y decimal.

Las unidades deben ir pegadas a los valores numéricos, sin espacio entre ellos. Por ejemplo, 10px, 0.5cm, -10pt, etc.

Cuando el valor es cero, se aconseja no escribir la unidad, por ejemplo, escribir 0 en vez de 0px.

Unidades relativas al tamaño de fuente

• em: el tamaño de fuente del elemento contenedor.
• ex: la altura de la letra x de la fuente del elemento contenedor.
• ch: la altura de la cifra 0, cero, de la fuente del elemento contenedor.
• rem: el tamaño de la fuente del elemento raíz de la página.

En la práctica, las unidades relativas más utilizadas son em y rem.

La unidad relativa em se puede relacionar directamente con los porcentajes, concretamente 1em = 100%.

Porcentajes

Cuando se emplean porcentajes para expresar el tamaño del tipo de letra, los valores superiores a 100% significan una ampliación y los valores inferiores a 100% significan reducción.

Cuando se emplean porcentajes para expresar distancias o tamaños de elementos, los porcentajes se interpretan con respecto al elemento contenedor cuando se refieren a distancias horizontales, o respecto al elemento contenedor o el tamaño de la ventana cuando se refieren a distancias verticales.

Debido a que las propiedades se aplican en cascada, al cambiar el tamaño de un elemento, los elementos contenidos en él también modifican su tamaño.

En el ejemplo siguiente, el párrafo situado en la división <div> aumenta su tamaño al 150%:

div { border: black 2px solid; font-size: 150%;}

Si se cambia el tamaño en dos elementos anidados, los porcentajes se multiplican entre sí. A este fenómeno se le denomina composición, es decir, el tamaño final es la composición de tamaños de cada elemento.

En el ejemplo siguiente, los párrafos están aumentados al 150%, por lo que el párrafo situado en la división, cuyo contenido está a su vez aumentado al 150%, está aumentado el 225%, el 150% del 150%, 150% x 150% = 225%.

div { border: black 1px solid;}p { font-size: 150%;}

Esta composición de tamaños no siempre es conveniente y puede provocar cambios de tamaños indeseados debido a anidamientos no previstos.

em, ex y ch

Las unidades relativas em, ex y ch permiten expresar el tamaño en función de la altura de un carácter:

• em: corresponde a la altura total del tipo de letra.
• ex: corresponde a la altura del carácter «x».
• ch: corresponde a la altura del carácter «0».

En estas unidades, el tamaño depende del tipo de letra que se esté utilizando.

En los ejemplos siguientes, los párrafos tienen un borde con un grosor 1em. Como cada fuente tiene una altura total diferente, el grosor del borde es distinto en cada caso.

p.borde-em-serif { border: red 1em solid; font-family: serif;}p.borde-em-sans-serif { border: green 1em solid; font-family: sans-serif;}p.borde-em-monospace { border: blue 1em solid; font-family: monospace;}

Con las unidades relativas em, ex y ch se produce también el fenómeno de composición comentado en el apartado anterior sobre porcentajes, es decir que si se cambia el tamaño en dos elementos anidados, los porcentajes se multiplican entre sí.

rem

La unidad relativa respecto al tipo de letra rem corresponde a la altura total del tipo de letra, como em, pero con la diferencia que la altura se interpreta siempre con respecto al elemento raíz de la página.

Por tanto, con la unidad relativa rem no se produce el fenómeno de composición de tamaños en elementos anidados.

En el ejemplo siguiente, los párrafos dentro de la división se ven del mismo tamaño que los párrafos de fuera de la división:

div { border: black 2px solid; font-size: 1.5rem;}p { font-size: 1.5rem;}

Para evitar la composición de tamaños, se puede utilizar la unidad relativa rem, introducida en CSS 3.

Unidades relativas a la pantalla

• vw: el 1% del ancho de la ventana.
• vh: el 1% del alto de ventana.
• vmin: el menor de los tamaños vw y vh.
• vmax: el mayor de los tamaños vw y vh.

Las unidades relativas vw y vh corresponden, respectivamente, al 1% del ancho y alto total disponibles para el documento.

p { background-color: lightgray; width: 50vw; height: 50vh;}

Las unidades relativas vmin y vmax corresponden, respectivamente, al menor y mayor de los valores vw y vh.

p.min { background-color: lightgray; width: 50vmin; height: 50vmin;}p.max { background-color: lightgray; width: 50vmax; height: 50vmax;}

Unidades absolutas

• px: píxeles, la 96ava parte de una pulgada.
• cm: centímetros.
• mm: milímetros.
• Q: cuartos de milímetros.
• in: pulgadas.
• pc: picas.
• pt: puntos.

Todas las unidades absolutas están relacionadas, puesto que se trata de unidades de distancia: 96px = 1in = 2.54cm, 10mm = 1cm, 4Q = 1mm, 6pc = 1in y 72pt = 6pc = 1in.

En la práctica, las unidades absolutas más utilizadas son px y pt.

Redefinición de px en CSS 3

En CSS 2 el píxel px era una unidad relativa, ya que se refería al tamaño de un píxel físico de una pantalla.

El problema es que desde hace unos años existen pantallas de alta densidad, sobre todo en los móviles, en los que los píxeles físicos son mucho más pequeños que en las pantallas de los años 90.

Este problema se ha resuelto en CSS 3 redefiniendo la unidad px, convirtiéndola en una distancia absoluta, independiente del tamaño del píxel de la pantalla.

Para mantener cierta compatibilidad con la definición antigua, se ha tenido en cuenta que las pantallas de los años 90 tenían una densidad de píxeles de 96dpi, definiendo el nuevo px de manera que 96 píxeles miden 1 pulgada, 96px = 1in.

Elementos vacíos y visibilidad

A veces, un elemento «invisible» es la solución para necesidades de espaciado complicadas.

1. Crea un elemento vacío: A menudo se usa un <div> o un <span>.
2. Dale dimensiones: Usa CSS para establecer un ancho y una altura para este elemento.
3. Oculta el contenido: Usa la propiedad visibility: hidden para hacer que el elemento desaparezca mientras sus dimensiones aún crean espacio en la página.

Esta técnica puede parecer extraña, pero puede ser útil para crear un espaciado fijo cuando otros métodos no son del todo adecuados.

Aunque esto funciona, a menudo es mejor encontrar soluciones CSS más semánticas usando márgenes, relleno o las técnicas de diseño Flexbox y Grid.

Pseudo-elementos ::before y ::after

Los pseudo-elementos te permiten estilizar y, lo que es más importante, agregar espacio alrededor de partes específicas de un elemento sin llenar tu HTML con etiquetas adicionales.

Los dos pseudo-elementos principales utilizados para el espaciado son ::before y ::after.

Estos pseudo-elementos te permiten insertar contenido antes o después del contenido existente de un elemento. Este contenido insertado se convierte en parte del diseño visual del elemento.

Usando CSS, puedes dar a los pseudo-elementos before y after un ancho, altura, margen y relleno. Esto los convierte en cajas invisibles que pueden crear efectos de espaciado.

Usos comunes incluyen agregar iconos decorativos, crear espacio para tooltips personalizados o insertar imágenes de fondo posicionadas junto al contenido principal del elemento.

Posicionamiento y separación

Si estableces un valor para position distinto de static, puedes espaciar elementos con las propiedades top, right, bottom y left.

• Un elemento con position: relative mantendrá su lugar en el flujo del documento incluso cuando establezcas estos valores. También estarán relacionados con la posición de tu elemento.
• Un elemento con position: absolute basará los valores direccionales a partir de la posición del elemento superior relativo.
• Un elemento con position: fixed basará los valores direccionales en el viewport.
• Un elemento con position: sticky solo aplicará los valores direccionales cuando el dispositivo esté acoplado o bloqueado.

En el módulo de propiedades lógicas, aprenderás sobre las propiedades inset-block y inset-inline, que permiten establecer valores direccionales que respetan el modo de escritura.

Ambas propiedades son abreviaturas que combinan los valores start y end y, por lo tanto, acepta que se establezca un valor para start y end, o dos valores individuales.

Cómo crear un espaciado coherente

Es muy buena idea elegir una estrategia y seguirla para ayudarte a crear una interfaz de usuario coherente con un buen flujo y ritmo.

Una buena manera de lograrlo es usar medidas coherentes para el espaciado. Por ejemplo, puedes comprometerte a usar 20px como una medida coherente para todos los espacios entre elementos, conocidos como medianiles, para que todos los diseños se vean y se sientan coherentes.

También puedes usar 1em como el espaciado vertical entre el contenido del flujo. Esto lograría un espaciado coherente basado en la font-size del elemento.

Sin importar lo que elijas, guardar estos valores como variables, o propiedades personalizadas de CSS, asignar tokens a esos valores y facilitar un poco la coherencia.

:root { --gutter: 20px; --spacing: 1em;}h1 { margin-left: var(--gutter); margin-top: var(--spacing);}

Usar propiedades personalizadas como esta te permite definirlas una vez y, luego, usarlas en todo el CSS.

Cuando se actualizan, ya sea a nivel local dentro de un elemento o globalmente, los valores pasarán por la cascada y se reflejarán los valores actualizados.

Espaciado en Elementor

Cuando trabajamos en diseñar y estructurar contenido web, los espacios en HTML pueden parecer un detalle menor, pero son fundamentales para lograr una presentación clara y bien organizada.

Los espacios no solo mejoran la legibilidad del contenido, sino que también ayudan a que la experiencia de usuario sea más cómoda. Sin embargo, es importante comprender cómo funcionan los espacios en HTML, ya que los navegadores tienen reglas específicas para interpretar los espacios en blanco.

Hasta ahora, hemos cubierto los bloques de construcción fundamentales del espaciado en HTML y CSS. Ahora, veamos cómo el constructor de sitios web Elementor toma estos conceptos y potencia tu flujo de trabajo.

Escenarios comunes

• Secciones de espaciado: Creando espacio entre las secciones principales de contenido en una página.
• Espaciado de widgets: Organizando widgets dentro de columnas y ajustando el espaciado a su alrededor.
• Formato de texto: implica ajustar el espaciado de líneas, márgenes de párrafos y estilos de encabezado, asegurando una apariencia de texto consistente en todo tu sitio.
• Equilibrio visual: Lograr un diseño armonioso donde el espaciado juega un papel crucial en el atractivo visual general.

Elementor permite trabajar visualmente con márgenes, rellenos, separación entre elementos, columnas, widgets y secciones, pero los conceptos siguen siendo los mismos: margin separa elementos desde el exterior, padding crea espacio dentro de un elemento y gap administra la distancia entre elementos hijos de un contenedor flexible o de cuadrícula.

La elección de la técnica depende del contexto del proyecto y de las necesidades específicas de compatibilidad y mantenimiento del código.

tags: #espacio #entre #divisiones #html