Espaciado

El podcast de CSS 013: Espaciado

Supongamos que tienes un conjunto de tres cuadros, apilados uno encima del otro, y quieres espacio entre ellos. ¿Cuántas maneras se te ocurren de hacer eso en CSS?

La propiedad margin podría brindarte lo que necesitas, pero también podría agregar espacios adicionales que no deseas. Por ejemplo, ¿cómo orientar solo el espacio entre cada uno de esos elementos? En este caso, algo como gap podría ser más apropiado. Existen muchas formas de ajustar el espaciado dentro de una IU, cada una con sus propias fortalezas y advertencias.

Espaciado de HTML

El mismo HTML proporciona algunos métodos para espaciar elementos. Los elementos <br> y <hr> te permiten espaciar los elementos en la dirección del bloque, que, si estás en un idioma basado en latín, es de arriba hacia abajo.

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

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

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 escribiras © 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. Sin embargo, ten cuidado, ya que el aspecto no rotundo de este carácter une los dos elementos, lo que puede generar un comportamiento extraño.

Margen

Si deseas agregar espacio en el exterior de un elemento, usa la propiedad margin. El margen es como agregar una almohadilla alrededor de tu 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, inferior e izquierda. Puede recordarlos con problemas: PROBLEMAS.

La abreviatura margin también se puede usar con uno, dos o tres valores. Agregar un cuarto valor te permite establecer cada lado individual. Estas se aplican de la siguiente manera:

• Se aplicará un valor en todos los lados. (margin: 20px).
• Dos valores: el primero se aplicará a los lados superior e inferior, y el segundo se aplicará a los lados izquierdo y derecho. (margin: 20px 40px)
• Tres valores: el primero es top, el segundo es left y right, y el tercero es bottom. (margin: 20px 40px 30px).

El margen se puede definir con una longitud, un porcentaje o un valor automático, como 1em o 20%. Si usas un porcentaje, el valor se calculará según el ancho del bloque que lo contiene.

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

También puedes usar un valor de auto para el margen. En el caso de los elementos a nivel de bloque con un tamaño restringido, un margen auto ocupará el espacio disponible en la dirección a la que se aplique. Un buen ejemplo es este del módulo flexbox, en el que los elementos se alejan entre sí.

Otro buen ejemplo de margen auto es un wrapper centrado horizontalmente que tiene un ancho máximo. Este tipo de wrapper se usa a menudo para crear una columna central coherente en un sitio web.

.wrapper {
    max-width: 400px;
    margin: 0 auto;
}

Aquí, el margen se quita de los lados superior e inferior (bloque), y auto comparte el espacio entre los lados izquierdo y derecho (intercalado).

Margen negativo

Los valores negativos también se pueden utilizar para el margen. En lugar de agregar espacio entre elementos del mismo nivel adyacentes, reducirá el espacio entre ellos. Esto puede generar elementos superpuestos si declaras un valor negativo mayor que el espacio disponible.

Contraer margen

La contracción de margen es un concepto complicado, pero es algo con lo que te encontrarás muy frecuentemente cuando compiles interfaces. Supongamos que tienes dos elementos: un encabezado y un párrafo que tienen un margen vertical:

<article>
  <h1>My heading with teal margin</h1>
  <p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>

h1 {
    margin-bottom: 2rem;
}

p {
    margin-top: 3rem;
}

A primera vista, no es posible que pienses que el párrafo tendrá un espaciado de 5em respecto del encabezado, ya que 2rem y 3rem combinados se calculan como 5rem. Sin embargo, debido a que el margen vertical se contrae, el espacio en realidad es 3rem.

La contracción de margen funciona mediante la selección del valor más grande de dos elementos adjuntos con el margen vertical establecido en los lados contiguos. La parte inferior del h1 se une con la parte superior de la p, por lo que se selecciona el valor más grande del margen inferior de h1 y del margen superior de p. Si h1 tuviera un 3.5rem de margen inferior, el espacio entre ambos sería 3.5rem porque es mayor que 3rem. Solo se contraen los márgenes de bloqueo, no los 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.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre el colapso de los márgenes

Evita la contracción de los márgenes

Si usas position: absolute para colocar un elemento en una posición absoluta, 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 elementos del mismo nivel adyacentes: solo son elementos del mismo nivel.

En la lección de diseño, aprendiste que los contenedores de Flexbox y de cuadrícula son muy similares a los contenedores de bloques, pero controlan sus elementos secundarios de manera muy diferente. Este es el caso también de la contracción del margen.

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

La contracción de los márgenes y los márgenes puede ser difícil de entender, pero es muy útil comprender en detalle cómo funcionan, por lo que te recomendamos esta explicación detallada.

Padding

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

Según el modelo de caja que uses (que se analizó en la lección sobre modelos de cajas), padding también puede afectar las dimensiones generales del elemento.

La propiedad padding es la abreviatura de padding-top, padding-right, padding-bottom y padding-left. Al igual que margin, padding también tiene propiedades lógicas: padding-block-start, padding-inline-end, padding-block-end y padding-inline-start.

Posicionamiento

También se explica en el módulo layout, si estableces un valor para position que no sea static, puedes espaciar elementos con las propiedades top, right, bottom y left. Existen algunas diferencias en el comportamiento de estos valores direccionales:

• Un elemento con position: relative mantendrá su lugar en el flujo del documento, incluso cuando configures 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 esté en su estado anclado o bloqueado.

En el módulo de propiedades lógicas, aprenderás sobre las propiedades inset-block y inset-inline, que te 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, aceptan un valor que se establecerá para start y end o dos valores individuales.

Cuadrícula y flexbox

Por último, en la cuadrícula y 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. También puedes utilizar palabras clave como unset, initial y inherit. Si defines un solo valor, se aplicará el mismo gap a las filas y columnas, pero si defines ambos valores, el primer valor es row-gap y el segundo es column-gap.

Con flexbox y la cuadrícula, también puedes crear espacio mediante sus capacidades de distribución y alineación, que abarcaremos en los módulos de cuadrícula y módulo de Flexbox.

Cómo crear espacios coherentes

Es una muy buena idea elegir una estrategia y seguirla para ayudarte a crear una interfaz de usuario coherente que tenga un buen flujo y ritmo. Una buena manera de lograr esto es usar medidas coherentes para el espaciado.

Por ejemplo, puedes comprometerte a usar 20px como medida coherente para todos los espacios entre elementos, conocidos como medianiles, de modo que todos los diseños se vean y se sientan coherentes. También puedes optar por usar 1em como el espaciado vertical entre el contenido del flujo, lo que lograría un espaciado coherente según el font-size del elemento. Independientemente de lo que elijas, debes guardar estos valores como variables (o propiedades personalizadas de CSS) para 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 tu CSS. Cuando se actualizan, ya sea de forma local dentro de un elemento o globalmente, los valores pasarán a través de la cascada y se reflejarán los valores actualizados.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre espaciado