Margen CSS vs. Relleno: ¿Cuál es la diferencia?

El contenido web se crea utilizando elementos de espaciado de margen y de relleno. Es importante saber cuándo utilizar cada uno de ellos al diseñar el contenido web. Aunque tanto el margen como el relleno crean espacio entre el texto y los objetos de una página web, desempeñan funciones diferentes.

En este artículo, explicamos las diferencias entre margen y relleno y cómo crearlos.

¿Qué es el margen?

El margen de una página web es el espacio entre el borde de un elemento y el siguiente. El margen rodea el contenido. El modelo de caja CSS incluye todos los elementos HTML y los rodea con márgenes. Puedes ajustar la cantidad de margen que rodea a un elemento especificando o alterando en CSS.

Cuándo utilizar el margen

El margen es una herramienta de diseño y disposición que se puede utilizar para:

  • Crear espacio entre los elementos de una página web, como entre una foto y las palabras que la describen
  • Cambiar la cantidad de espacio entre los elementos
  • Evitar que los elementos se toquen
  • Elementos de solapamiento
  • Centrar un elemento horizontalmente en un espacio
  • Mover un elemento hacia arriba o hacia abajo o de lado a lado

Puede ajustar los márgenes con valores negativos y positivos para crear menos o más espacio.

Relacionado: ¿Qué es el CSS?

¿Qué es el acolchado?

Otra parte del modelo de caja CSS, el acolchado es el espacio entre un borde y el elemento que lo contiene. El relleno rodea el texto o la imagen dentro de un determinado límite para evitar que ese contenido toque el borde o la caja que lo rodea. Al igual que los márgenes, se puede crear y cambiar la cantidad de relleno al diseñar una página web.

Cuándo utilizar el acolchado

El acolchado es una herramienta útil si se quiere:

  • Añadir espacio dentro de una caja o elemento
  • Evitar que el contenido toque los bordes de su contenedor
  • Permitir que los elementos se toquen o superpongan entre sí pero no su texto
  • Aumentar el tamaño de un elemento, como un botón, pero no el texto que contiene

A medida que aumentas los valores de relleno, el elemento dentro de la caja llena más espacio dentro de esos límites.

Relacionado: Habilidades del desarrollador web: Definiciones y ejemplos

Margen frente al acolchado

Aunque los diseñadores web utilizan tanto el margen como el relleno para crear espacio en blanco, ambos comandos tienen propósitos diferentes y no pueden utilizarse indistintamente. Estas son las principales diferencias entre margen y relleno:

La forma de crear espacio alrededor de los elementos

El margen aleja los elementos que tiene al lado. El relleno se expande para crear más espacio alrededor de un elemento o reduce el tamaño del contenido dentro de sus bordes.

El acolchado cambia las dimensiones

Cuando se establecen valores de relleno, el tamaño de ese elemento aumenta. Cuando establece valores de margen, el tamaño del elemento no cambia, sólo el espacio que lo rodea.

Los márgenes pueden ser negativos o positivos

Puede establecer valores de margen para que sean negativos si desea que los elementos se superpongan. Los valores de relleno, sin embargo, sólo pueden ser positivos.

Los márgenes pueden ser automáticos

Los márgenes tienen un valor «auto» que puede elegir si desea centrar un elemento horizontalmente en un espacio. La función automática determina cuánto espacio necesita a cada lado de un elemento para que aparezca centrado y lo aplica por usted. El relleno no tiene esta función.

El acolchado ignora los elementos en línea

Cuando su diseño web incluye elementos en línea, que no fluyen a una nueva línea y sólo ocupan el ancho necesario, puede utilizar el margen y el relleno para añadir espacio a ambos lados del elemento en línea, pero no por encima o por debajo de él. Esto es más evidente con el relleno.

Relacionado: Aprende a ser diseñador web

Cómo crear márgenes con CSS

Al crear un margen con CSS, siga estos pasos:

1. Comprender el orden y las propiedades de los márgenes

En el panel CSS de su navegador, puede establecer cuatro márgenes alrededor de cualquier elemento en el orden de las agujas del reloj: superior (margen superior), derecho (margen derecho), inferior (margen inferior) e izquierdo (margen izquierdo)

2. Decida qué márgenes quiere manipular

Puede establecer estos márgenes utilizando de uno a cuatro valores. Si desea que los márgenes de todos los lados de un elemento sean iguales, aplique un solo valor. Si desea diferentes cantidades de espacio, el orden en el que se aplican dos o más valores es importante. Dos valores afectan sólo a la parte superior e inferior, y luego a la derecha e izquierda. Tres valores afectan a los márgenes superior, derecho e izquierdo, y luego al inferior, respectivamente. Cuatro valores afectan a los márgenes superior, derecho, inferior e izquierdo, respectivamente.

3. Especifique el valor

Puede establecer los márgenes manualmente utilizando longitudes o porcentajes. También puede utilizar la función auto para dejar que el navegador del ordenador los establezca o la función heredar para heredar el relleno del elemento padre. El porcentaje utiliza el símbolo %, y la longitud utiliza unidades como px, pt o cm. Por ejemplo, si quieres crear márgenes alrededor de un elemento de 20 píxeles en la parte superior, 50 píxeles a la derecha, 40 píxeles abajo y 80 píxeles a la izquierda, utiliza este código y orden: p { margin: 20px 50px 40px 80px }.

4. Prevenir el colapso

Si usted tiene un elemento con un margen inferior seguido de un elemento con un margen superior, esos dos márgenes se combinan, o «colapso.» El margen más grande absorbe el más pequeño para crear un espacio más grande entre esos dos elementos. Para evitar el colapso, utilice la función de contexto de formato de bloque para contener el elemento, o utilice contenedores de flexión y cuadrícula para crear reglas de formato para su contenido.

Relacionado: Guía para principiantes para aprender a programar

4. Cómo crear relleno con CSS

Cuando cree un margen con CSS, siga estos pasos:

1. Entender el orden y las propiedades del relleno

Al igual que con los márgenes, se puede establecer el relleno alrededor de cuatro lados en el orden de las agujas del reloj: arriba (padding-top), derecha (padding-right), abajo (padding-bottom) e izquierda (padding-left)

2. 6. Decidir a cuántos lados quiere aplicar el acolchado

Una vez más, puede utilizar de uno a cuatro valores para establecer el acolchado, con un valor que afecta a todos los lados por igual. Dos valores afectan sólo a la parte superior e inferior, y luego a la derecha e izquierda. Tres valores afectan a los márgenes superior, derecho e izquierdo, y luego al inferior, respectivamente. Cuatro valores afectan a los márgenes superior, derecho, inferior e izquierdo, respectivamente.

3. Especifique el valor

Puede establecer el relleno mediante la longitud, el porcentaje o la herencia. Por ejemplo, si quiere crear un relleno dentro de un contenedor de 40 píxeles en la parte superior, 80 píxeles a la derecha, 60 píxeles abajo y 70 píxeles a la izquierda, utilice este código y orden: div { padding: 40px 80px 60px 70px }.