Saltar al contenido

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

febrero 8, 2022
css margin vs padding.jpegkeepProtocol

Si eres nuevo en CSS, es posible que hayas escuchado las palabras margen y relleno pero no está muy seguro de lo que significan o cómo usarlos en los diseños de su sitio web. Estos conceptos hacen cosas similares en CSS. Sin embargo, no son exactamente iguales y existen importantes diferencias fundamentales en su uso.

Una vez que comprenda completamente la diferencia entre márgenes y relleno, podrá tomar mejores decisiones de diseño para su sitio web. Así que echemos un vistazo a estas dos propiedades y lo que hacen. Incluiremos muchos ejemplos visuales para ilustrar cómo funcionan estos importantes componentes de CSS.

Descargar ahora: Guía de introducción gratuita a HTML y CSS

¿Cuál es la diferencia entre margen y relleno en CSS?

En CSS, un margen es el espacio alrededor del borde de un elemento, mientras que el relleno es el espacio entre el borde de un elemento y el contenido del elemento. Dicho de otra manera, la propiedad margin controla el espacio fuera de un elemento, y la propiedad padding controla el espacio dentro un elemento.

Exploremos primero los márgenes. Considere el elemento que se ilustra a continuación, que tiene un margen de 10 píxeles:

una ilustración de los márgenes alrededor de un elemento de página

Esto significa que habrá al menos 10 píxeles de espacio entre este elemento y los elementos de página adyacentes: el margen «empuja» a sus vecinos. Si juntamos varios de estos elementos, vemos cómo los márgenes crean espacios en blanco entre ellos, dándoles espacio para respirar:

una ilustración de los márgenes alrededor de varios elementos de página

Por otro lado, el relleno se encuentra dentro del borde de un elemento. El siguiente elemento tiene un relleno de 10 px en los lados izquierdo y derecho, y un relleno de 15 px en los lados superior e inferior:

una ilustración del relleno dentro de un elemento de página

Para crear el espacio, el relleno aumenta el tamaño del elemento o reduce el contenido del interior. Por defecto, el tamaño del elemento aumenta. Si desea crear el espacio reduciendo el contenido, configure el tamaño de caja propiedad a cuadro de borde (es decir tamaño de caja: cuadro de borde).

Cuando esté ajustando el diseño de su diseño, deberá determinar si cambiará los márgenes o el relleno para lograr el efecto visual deseado. En esta sección, daremos algunos usos comunes para cada propiedad, comenzando con los márgenes.

Usos de los márgenes

Los márgenes CSS determinan el espacio que rodea a un elemento. Por lo tanto, los márgenes se pueden utilizar para…

1. Cambiar la posición de un elemento en la página

Los márgenes CSS pueden mover un elemento hacia arriba o hacia abajo en la página, así como hacia la izquierda o hacia la derecha. Si el ancho de su página es fijo, centrar un elemento horizontalmente es simple: solo asigne el valor margen: automático.

ver la pluma Margen CSS vs. Relleno – margen: automático de Christina Perricone (@hubspot) sobre CódigoPen.

2. Establecer la distancia entre elementos cercanos

Los márgenes determinan la cantidad de espacio entre elementos adyacentes o espacios en blanco. Los espacios en blanco son importantes para hacer que las páginas web sean visualmente aceptables. Por ejemplo, use márgenes para agregar espacio entre las imágenes o entre una imagen y la descripción del texto debajo de ella:

ver la pluma Margen CSS vs. Relleno – Espacio en blanco de la imagen de Christina Perricone (@hubspot) sobre CódigoPen.

3. Elementos superpuestos

Por otro lado, un valor de margen negativo le permite superponer elementos de página. Esto puede ser útil cuando se trata de lograr un efecto de cuadrícula rota.

ver la pluma Margen CSS frente a relleno: efecto de cuadrícula rota de Christina Perricone (@hubspot) sobre CódigoPen.

Usos para relleno

El relleno CSS determina cómo se ve el contenido dentro de su elemento respectivo. Puede cambiar el relleno CSS para lograr los siguientes efectos:

1. Agregue espacio entre el contenido y su borde

Este es el uso más común del relleno y es útil para crear espacios en blanco dentro de sus elementos.

ver la pluma Margen CSS frente a relleno – Tamaños de relleno de Christina Perricone (@hubspot) sobre CódigoPen.

2. Cambiar el tamaño de un elemento

Cuando aumenta el valor de relleno, el contenido permanecerá del mismo tamaño, pero agregará más espacio alrededor del contenido. Esto es útil para elementos interactivos, como botones, cuando desea expandir el área en la que se puede hacer clic.

El modelo de caja CSS

Para ver cómo los márgenes y el relleno funcionan juntos para establecer el espacio alrededor del contenido de un elemento, también podemos usar el modelo de caja CSS. El modelo de caja CSS se utiliza para el diseño y la disposición de la página. Esencialmente, cada elemento HTML en un documento está envuelto dentro de un cuadro en capas que consiste en el margen, el borde, el relleno y el contenido:

una ilustración del modelo de caja css

Aplicar alto y ancho a sus elementos es más fácil una vez que comprende el modelo de caja CSS. Para garantizar una alineación adecuada, solo necesitará hacer algunos cálculos simples. Sin embargo, si está confundido acerca de cómo funciona el modelo de caja, podría terminar con un diseño descuidado. Para obtener más información sobre este concepto, consulta nuestra guía sobre el modelo de caja CSS.

Margen CSS vs. Relleno vs. Borde

El borde es la capa del modelo de caja CSS que se encuentra entre el margen y el relleno. De forma predeterminada, el borde no tiene ningún ancho, pero puede establecer uno con el CSS frontera propiedad.

El margen y el relleno son siempre partes de un elemento, incluso si no hay un borde visible. Esta imagen ilustra tal caso:

una ilustración del relleno y los márgenes en un elemento de página HTML

Esto puede ser un poco confuso para los principiantes: los dos bloques de contenido no tienen un borde visible, pero el margen y el relleno aún se aplican.

Cómo agregar márgenes en CSS

Cada elemento HTML tiene cuatro márgenes que puede alternar: superior, derecho, inferior e izquierdo.

Para establecer el mismo valor de margen en los cuatro lados de un elemento, use el margen propiedad. Para establecer el margen para lados específicos de un elemento, use el margen superior, margen derecho, margen inferiory margen izquierdo propiedades

ver la pluma Margen CSS frente a relleno – Configuración de márgenes 1 de Christina Perricone (@hubspot) sobre CódigoPen.

También puede especificar el margen propiedad con dos, tres o cuatro valores según los lados a los que desee aplicar márgenes. Si desea márgenes uniformes en todos los lados, solo necesitará aplicar un valor. De lo contrario, el orden de los valores es importante:

  • Se aplican dos valores a la parte superior e inferior, luego a la derecha y a la izquierda.
  • Se aplican tres valores a la parte superior, luego a la derecha y a la izquierda, y luego a la parte inferior.
  • Se aplican cuatro valores a la parte superior, luego a la derecha, luego a la parte inferior y luego a la izquierda.

ver la pluma Margen CSS vs. relleno: configuración de márgenes 2 de Christina Perricone (@hubspot) sobre CódigoPen.

Cada valor se puede representar como una longitud fija (a menudo en px), un porcentaje (que define el valor como un porcentaje del ancho de su contenedor) o auto (que permite que el navegador establezca el margen).

Cómo agregar relleno en CSS

Al igual que con los márgenes, el relleno tiene cuatro lados para declarar: superior, derecho, inferior e izquierdo.

Para configurar el relleno en todos los lados, use la propiedad abreviada relleno. Para configurar el relleno para un lado específico, use el acolchado superior, acolchado-derecho, fondo acolchadoy relleno-izquierda propiedades

ver la pluma Margen CSS frente a relleno – Configuración de relleno 1 de Christina Perricone (@hubspot) sobre CódigoPen.

Al usar el relleno propiedad abreviada, también puede definir el relleno usando dos, tres o cuatro valores. Al igual que con los márgenes, se aplicará un valor en los cuatro lados. De lo contrario, el orden en que se escriban los valores determinará a qué lados se aplica cada uno:

  • Se aplican dos valores a la parte superior e inferior, luego a la derecha y a la izquierda.
  • Se aplican tres valores a la parte superior, luego a la derecha y a la izquierda, y luego a la parte inferior.
  • Se aplican cuatro valores a la parte superior, luego a la derecha, luego a la parte inferior y luego a la izquierda.

ver la pluma Margen CSS vs. Relleno – Configuración del Relleno 2 de Christina Perricone (@hubspot) sobre CódigoPen.

Cada valor se puede representar como una longitud fija o un porcentaje (que lo define como un porcentaje del ancho del contenedor).

Márgenes y relleno CSS: similares, pero no iguales

Para espaciar elementos en CSS, normalmente usará el margen y relleno propiedades Comprender la diferencia es un paso hacia el dominio de CSS. Ahora también sabe cómo establecer el margen y el relleno utilizando la propiedad abreviada, que es mucho más rápida que definir cada lado de forma independiente.

En diseño web y desarrollo web, HTML y CSS van de la mano. HTML define la estructura y la semántica del contenido, mientras que CSS establece el estilo y el diseño. Si es un principiante, le recomendamos familiarizarse completamente con HTML antes de intentar CSS. Siga volviendo a HTML a medida que aprende CSS hasta que comprenda completamente HTML. Una vez que haya aplicado CSS, HTML se vuelve mucho más interesante.

Nota del editor: esta publicación se publicó originalmente en abril de 2020 y se actualizó para que sea más completa.

Nueva llamada a la acción