Espaciado

Podcast de CSS - 013: Spacing

Supongamos que tienes una colección de tres cajas, se apilan una encima de la otra y queremos que haya espacio entre ellas. ¿Cuántas se te ocurre a hacer eso en CSS?

La propiedad margin podría ofrecerte lo que necesitas, pero también puede agregar espacios adicionales que no deseas. Por ejemplo, ¿cómo te orientas solo al espacio entre cada uno de esos elementos? Algo como gap podría ser más apropiado en este caso. Hay muchas maneras de ajustar el espaciado dentro de una IU, cada uno con sus propias fortalezas y advertencias.

Espacio HTML

El HTML mismo proporciona algunos métodos para espaciar los elementos. 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.

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

<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 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. Sin embargo, ten cuidado, porque el aspecto de no ruptura de este personaje une los dos elementos, lo que puede provocar comportamientos extraños.

Margen

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. Puedes recordar estos errores: TROUBLe.

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

• Se aplicará un valor a todos los lados. (margin: 20px).
• Dos valores: el primer valor se aplicará a la parte superior e inferior. y el segundo valor se aplica a la izquierda y a la derecha. (margin: 20px 40px)
• Tres valores: el primero es top, el segundo valor es left y right, y el tercer valor es bottom. (margin: 20px 40px 30px).

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.

También puedes usar un valor de auto para el margen. Para los elementos de nivel de bloque con un tamaño restringido, un margen de auto ocupará espacio disponible en la dirección en 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 (bloqueo), y auto comparte el espacio entre los lados izquierdo y derecho (intercalados).

Margen negativo

Los valores negativos también se pueden usar para el margen. En lugar de agregar espacio entre elementos del mismo nivel reducirá el espacio entre ellos. Esto puede dar como resultado la superposición de elementos, si declaras un valor negativo superior al espacio disponible.

Contracción de margen

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:

<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, se te perdona pensar que el párrafo estará separado del encabezado 5em 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.

Verifica tus conocimientos

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

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.

El margen y la contracción de los márgenes pueden ser difíciles de entender pero entender en detalle cómo funcionan es muy útil, Por eso, esta explicación detallada se recomienda.

Relleno

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

Según el modelo de caja que uses, como ya lo vimos en el lección sobre modelo de caja : 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 aborda en el módulo sobre diseño. si estableces un valor para position distinto de static, puedes espaciar elementos con las propiedades top, right, bottom y left. Existen algunas diferencias con cómo se comportan estos valores direccionales:

• 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.

Cuadrícula y flexbox

Por último, 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. También puedes utilizar palabras clave como unset, initial y inherit. 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.

Con Flexbox y la cuadrícula, también puedes crear espacio gracias a sus capacidades de distribución y alineación. que abordamos en la módulo de cuadrícula y módulo de Flexbox.

Cómo crear espaciado consistente

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, 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. lo que 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.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre espaciado