Padding vs Margin: ¿cuál es la diferencia en CSS?

Al editar un sitio web con CSS, las propiedades más utilizadas para espaciar los elementos de una página son el padding (relleno) vs el margin (margen). Para principiantes, estos términos pueden parecer confusos. Además, si se aplican de forma incorrecta, pueden dar lugar a un diseño web desordenado.

La principal diferencia entre el padding y el margin de CSS es que el padding es el espacio entre el contenido y el borde del elemento (dentro del propio elemento), mientras que el margin es el espacio alrededor del borde de un elemento.

Por ello, esta guía te explicará con más detalle la diferencia entre padding vs margin, cómo funcionan y cómo implementarlos en CSS. Además, al final del artículo se ofrecen consejos adicionales que te ayudarán a utilizarlos correctamente.

Descarga la hoja de trucos CSS definitiva

Padding vs Margin: ¿Qué son y cuándo usarlos?

Tanto el relleno como el margen se utilizan para crear un tema de WordPress y personalizar el diseño de un sitio web. Sin embargo, cada uno tiene sus propios propósitos y funciones.

Padding

La propiedad padding es la que crea el espacio o área alrededor del contenido de un elemento. Consiste en el relleno superior, derecho, inferior e izquierdo. En CSS se escriben como padding-top:, padding-right:, padding-bottom: y padding-left:. Sus valores por defecto son 0.

Para añadir relleno a un elemento, puedes establecer los valores en:

• Longitud: un valor fijo, normalmente en px, pt o cm.
• Porcentaje: el tamaño del relleno es relativo al ancho del elemento.
• Heredar: establece las propiedades de relleno CSS para seguir el elemento padre.

Ten en cuenta que no puedes utilizar valores negativos y automáticos para los rellenos.

Este es un ejemplo de código CSS de padding estándar:

div {
  padding-top: 30px;
  padding-right: 50px;
  padding-bottom: 30px;
  padding-left: 50px;
}

El padding tiene una propiedad abreviada: padding:. Simplifica el código anterior a un código de una sola línea. Esto es para evitar tener un archivo CSS largo, que puede ralentizar el tiempo de carga de tu sitio.

La propiedad abreviada padding puede tener de uno a cuatro valores:

• Cuatro valores: cuando necesitas especificar los valores de los rellenos superior, derecho, inferior e izquierdo. El código anterior, por ejemplo, podría escribirse como:

padding: 30px 50px 30px 50px;

• Tres valores: si el relleno de la derecha y de la izquierda tienen la misma longitud, puedes fusionar los valores de la derecha y de la izquierda en uno solo. Así, el código sería:

padding: 30px 50px 30px;

• Dos valores: el primer valor determina el relleno superior e inferior mientras que el segundo valor establece el relleno derecho e izquierdo:

padding: 30px 50px;

• Un valor: cuando quieres especificar una longitud a los cuatro lados del relleno. Por ejemplo:

padding: 30px;

Ten en cuenta que cuando fijas el ancho de un elemento, los paddings se sumarán al ancho total. Observa el siguiente ejemplo:

div {
  width: 250px;
  padding: 25px;
} 

El ancho total del elemento es de 300px, o sea 250px más 25px de padding derecho y 25px de padding izquierdo. Si quieres que un elemento tenga una anchura específica, ten en cuenta la longitud del padding.

Utiliza el padding cuando no quieras que el contenido de un elemento toque los bordes de su contenedor. También puedes utilizarlo para aumentar y disminuir el tamaño de los elementos web.

Tomemos de ejemplo el elemento “Buttons”. El padding es el área que rodea la etiqueta o el texto del botón. Cuando editas el padding, afectará al tamaño del botón porque tendrás más o menos espacio alrededor del texto.

Margin

La propiedad margin es la capa más externa de un elemento web. En otras palabras, crea un espacio alrededor del elemento. La propiedad consta de margin-top:, margin-right:, margin-bottom: y margin-left:.

Al igual que el padding, el margin puede establecerse en valores de longitud, porcentaje y heredado. Sin embargo, también admite:

• Auto: el navegador calculará un valor de margen adecuado para usar. Normalmente centrará el elemento web.
• Valores negativos: acerca los elementos a sus vecinos.

El código de margin estándar es:

div {
  margin-top: 100px;
  margin-right: 25px;
  margin-bottom: 100px;
  margin-left: 25px;
}

En CSS, el margin también tiene una propiedad abreviada: margin:. Se determina por el número de valores también:

• Cuatro valores: si deseas determinar los cuatro lados del margen. Por ejemplo:

margin: 100px 25px 100px 25px;

Recuerda que debes escribir los valores en orden desde la parte superior y luego moverse en el sentido de las agujas del reloj hacia la izquierda. 

• Tres valores: aplicable cuando el margen derecho y el izquierdo tienen el mismo valor:

margin: 100px 25px 100px;

• Dos valores: el primer valor se aplica al margen superior e inferior mientras que el segundo valor se refiere al margen derecho e izquierdo:

margin: 100px 25px;

• Un valor: cuando deseas que los cuatro márgenes tengan la misma longitud. Por ejemplo:

margin: -30px;

Para autoajustar el margen, simplemente escribe el código:

div {
  width: 250px;
  margin: auto;
}

Esto centrará horizontalmente el elemento dentro de su contenedor. En otras palabras, el elemento ocupará el ancho especificado y el espacio restante se dividirá a partes iguales entre el margen izquierdo y el derecho.

Utiliza un margen cuando quieras mover elementos hacia arriba, abajo, izquierda, derecha o centrarlos. La distancia entre elementos también es obra de los márgenes. Aparte de eso, los márgenes también se pueden utilizar para superponer elementos.

Por ejemplo, con el elemento imagen, puede utilizar un margen para colocar otra imagen encima. También puede establecer una distancia específica entre la imagen y un cuadro de texto.

Padding CSS vs Margin vs Border: ¿Cuál es la diferencia?

El padding es una propiedad CSS que funciona sólo en elementos que tienen borders (bordes). Crea el espacio entre el borde y el contenido de un elemento. Por lo tanto, ten en cuenta que el relleno no tiene efecto en los elementos que no tienen bordes. 

Los margenes forman el espacio fuera de los bordes de los elementos. A diferencia del relleno, los márgenes pueden afectar a un elemento tenga o no bordes

Otra diferencia es que el color de fondo del relleno y de los bordes se puede personalizar, mientras que los márgenes son transparentes. Con ellos se mostrará el color de fondo del tema del sitio web.

El modelo de caja CSS

Cada página web está formada por bloques de contenido rectangulares. Estos están dispuestos encima, debajo y al lado unos de otros. Estos bloques son lo que llamamos elementos HTML.

El modelo de caja CSS es básicamente un contenedor o caja que envuelve cada elemento HTML. Se compone de:  

• Caja de contenido: el área donde se muestra tu contenido, como textos e imágenes.
• Caja de padding: es el espacio que rodea el área de contenido.
• Caja de border: se refiere al contenedor entre el padding y el margin o la caja que envuelve el elemento.
• Caja de margin: la capa más externa o espacio invisible fuera del border. 
• Ancho: se refiere al ancho del área de contenido de un elemento. Su valor es del 100% por defecto, pero puede establecerse una anchura definida. 
• Altura: normalmente se basa en la longitud del contenido, pero también es posible establecer una altura específica.

A continuación se muestra el código de un modelo de caja CSS estándar con su vista previa:

{
 width: 250px;
 height: 100px; 
 margin: auto;
 padding: 20px;
 background-color: cyan;
 border: 5px solid blue;
}

¿Cómo añadir padding en CSS?

El siguiente tutorial te mostrará cómo añadir padding a un elemento encabezado en una entrada de WordPress.

1. En el panel de control de WordPress, sitúa el cursor sobre Apariencia y selecciona Personalizar.

2. Haz clic en la página o el post que quieres editar. A continuación, desplázate por el menú lateral y haz clic en la pestaña CSS adicional.

3. Introduce los valores de relleno para el elemento H1. Por ejemplo:

h1 {
background-color: beige;
padding: 20px 100px;
}

4. Guarda los cambios.

¿Cómo añadir margin en CSS?

Sigue los siguientes pasos para añadir márgenes a un elemento de imagen en una entrada de WordPress. 

1. Ve al panel de control de WordPress -> Apariencia -> Personalizar.
2. Selecciona la entrada que desea editar. Busca y haz clic en la pestaña CSS adicional del menú lateral.

3. Escribe el valor del margen para el elemento imagen. Por ejemplo:

img {
margin: -20px 5px;
}

4. Guarda las ediciones.

Consejos para utilizar padding y margin

Diferentes elementos de contenido pueden funcionar mejor con padding o margin. Así que tenlo en cuenta a la hora de elegir entre ambos. Aquí tienes otros consejos que pueden resultarte útiles:

• Para añadir espacio dentro de una columna, utiliza relleno en lugar de los márgenes si estás construyendo una cuadrícula sensible. 
• Utiliza relleno en las columnas si una página web tiene varias columnas que se apilarán verticalmente en una pantalla más pequeña.
• Utiliza las propiedades de los márgenes para añadir espacio alrededor del texto, la imagen y los elementos contenedores.
• Añade primero los márgenes inferiores para crear un espacio coherente entre los elementos. 
• Cuando un contenedor se encuentra dentro de una columna, añade un margen inferior al contenedor. Esto añadirá más espacio cuando el contenido se apile verticalmente en pantallas pequeñas.
• Utiliza los márgenes para espaciar alrededor de los botones en lugar del relleno, ya que afecta al estilo del botón.
• Cuando tengas un elemento interactivo, utiliza los márgenes para añadir espacio a su alrededor.

Si editar manualmente el diseño de un sitio web utilizando CSS es demasiado complicado para ti, prueba un constructor de páginas. No requiere codificación y ofrece una fácil personalización, ahorrando mucho tiempo.

Además, el diseño que crees será automáticamente responsivo. No tendrás que preocuparte de tomar decisiones de diseño difíciles en cuanto a márgenes y relleno. El sitio web se ajustará a la perfección en varios tamaños de pantalla. 

Conclusión

En CSS, tanto el padding como el margin añaden espacio a los elementos de la web, pero cada uno aporta resultados diferentes. El padding es el espacio entre el contenido de un elemento y el borde.

Por otra parte, el margin constituye el espacio más externo del elemento.

Para los principiantes, puede ser un poco confuso decidir qué propiedad aplicar al diseñar tu sitio web. Sin embargo, te irás familiarizando con ellas a medida que vayas jugando y experimentando. 

Esperamos que los consejos mencionados en este artículo te hayan ayudado a entender sus diferencias y cuándo utilizar el relleno o el margen.