Cuándo usar margen vs relleno en CSS [cerrado]

Al escribir CSS, ¿hay alguna regla o directriz particular que deba usarse para decidir cuándo usar marginy cuándo usar padding?

TL; DR: Por defecto, uso el margen en todas partes, excepto cuando tengo un borde o fondo y quiero aumentar el espacio dentro de ese cuadro visible.

Para mí, la mayor diferencia entre el relleno y el margen es que los márgenes verticales se contraen automáticamente y el relleno no.

Considere dos elementos uno encima del otro, cada uno con relleno de 1em. Este relleno se considera parte del elemento y siempre se conserva.

Por lo tanto, terminará con el contenido del primer elemento, seguido del relleno del primer elemento, seguido del relleno del segundo, seguido del contenido del segundo elemento.

Así, el contenido de los dos elementos terminará siendo 2emseparado.

Ahora reemplace ese relleno con un margen de 1em. Los márgenes se consideran fuera del elemento, y los márgenes de los elementos adyacentes se superpondrán.

Entonces, en este ejemplo, terminará con el contenido del primer elemento seguido 1emde un margen combinado seguido del contenido del segundo elemento. Entonces el contenido de los dos elementos es solo 1emaparte.

Esto puede ser realmente útil cuando sabes que quieres decir 1emsobre el espacio alrededor de un elemento, independientemente de qué elemento esté al lado.

Las otras dos grandes diferencias son que el relleno se incluye en la región de clic y el color / imagen de fondo, pero no en el margen.

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }

<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

El margen está en el exterior de los elementos del bloque mientras que el relleno está en el interior.

• Use el margen para separar el bloque de las cosas fuera de él.
• Use relleno para alejar el contenido de los bordes del bloque.

Lo mejor que he visto explicando esto con ejemplos, diagramas e incluso una vista de "pruébalo tú mismo" está aquí .

Creo que el siguiente diagrama ofrece una comprensión visual instantánea de la diferencia.

Una cosa a tener en cuenta es que los navegadores que cumplen con los estándares (las peculiaridades de IE son una excepción ) representan solo la porción de contenido al ancho dado, así que haga un seguimiento de esto en los cálculos de diseño. También tenga en cuenta que el cuadro de borde está volviendo a aparecer con Bootstrap 3 apoyándolo.

Hay más explicaciones técnicas para su pregunta, pero si está buscando una manera de pensar margen y el relleno que lo ayudará a elegir cuándo y cómo usarlos, esto podría ayudar.

Compare elementos de bloque con imágenes colgadas en una pared:

• La ventana del navegador es igual que la pared.
• El contenido es como una fotografía.
• El margen es como el espacio de la pared entre imágenes enmarcadas.
• El relleno es como el tapete alrededor de una foto.
• El borde es como el borde de un marco.

Al decidir entre margen y relleno, es una buena regla general usar el margen cuando está espaciando un elemento en relación con otras cosas en la pared, y el relleno cuando está ajustando la apariencia del elemento en sí. El margen no cambiará el tamaño del elemento, pero el relleno generalmente hará que el elemento sea más grande ¹ .

¹ Este modelo de caja por defecto puede ser alterado con el box-sizingatributo .

MARGEN vs PADDING :

1. El margen se usa en un elemento para crear distancia entre ese elemento y otros elementos de la página. Donde el relleno se usa para crear distancia entre el contenido y el borde de un elemento.

2. El margen no es parte de un elemento donde el relleno es parte del elemento.

Consulte a continuación la imagen extraída de Margin Vs Padding - Propiedades de CSS

Desde https://www.w3schools.com/css/css_boxmodel.asp

Explicación de las diferentes partes:

• Contenido : el contenido del cuadro, donde aparecen el texto y las imágenes.

• Relleno : borra un área alrededor del contenido. El acolchado es transparente

• Borde : un borde que rodea el relleno y el contenido.

• Margen : borra un área fuera del borde. El margen es transparente

Ejemplo en vivo (juegue cambiando los valores): https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

Aquí hay algunos HTML que demuestran cómo paddingy marginafectan la capacidad de hacer clic y el relleno de fondo. Un objeto recibe clics en su relleno, pero los clics en un área marginada de objetos van a su padre.

$(".outer").click(function(e) {
  console.log("outer");
  e.stopPropagation();
});

$(".inner").click(function(e) {
  console.log("inner");
  e.stopPropagation();
});

.outer {
  padding: 10px;
  background: red;
}

.inner {
  margin: 10px;
  padding: 10px;
  background: blue;
  border: solid white 1px;
}

<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div>

Lo que pasa con los márgenes es que no necesita preocuparse por el ancho del elemento.

Al igual que cuando das algo {padding: 10px;}, tendrás que reducir el ancho del elemento en 20px para mantener el ' ajuste ' y no molestar a otros elementos a su alrededor.

Así que generalmente empiezo usando rellenos para obtener todo ' packed' y luego uso márgenes para pequeños ajustes.

Otra cosa a tener en cuenta es que los rellenos son más consistentes en diferentes navegadores e IE no trata muy bien los márgenes negativos.

El margen borra un área alrededor de un elemento (fuera del borde), pero el relleno borra un área alrededor del contenido (dentro del borde) de un elemento.

significa que su elemento no sabe acerca de sus márgenes externos, por lo que si está desarrollando controles web dinámicos, le recomiendo que use relleno o margen si puede.

Tenga en cuenta que algunas veces tiene que usar margen.

Es bueno saber las diferencias entre marginy padding. Aquí hay algunas diferencias:

• El margen es el espacio exterior de un elemento, mientras que el relleno es el espacio interior de un elemento.

• El margen es el espacio fuera del borde de un elemento, mientras que el relleno es el espacio dentro del borde del mismo.

• Margen acepta el valor de auto: margin: autopero no puede configurar el relleno en auto.

• El margen se puede establecer en cualquier número, pero el relleno no debe ser negativo.

• Cuando diseña un elemento, el relleno también se verá afectado (por ejemplo, el color de fondo), pero no el margen.

Una cosa a tener en cuenta es que cuando los márgenes de contracción automática lo molestan (y no está utilizando colores de fondo en sus elementos), algo que es más fácil de usar relleno.

Margen avanzado versus relleno explicado

Es inapropiado usar paddingpara espaciar el contenido en un elemento; se debe utilizar marginen el elemento hijo en su lugar. Los navegadores más antiguos, como Internet Explorer, malinterpretaron el modelo de la caja, excepto cuando se trataba de usar, marginque funciona perfectamente en Internet Explorer 4 .

Hay dos excepciones cuando usar padding es apropiado:

1. Se aplica a un elemento en línea que no puede contener elementos secundarios, como un elemento de entrada.

2. Está compensando un error de navegador muy variado que un proveedor * tos * Mozilla * tos * se niega a corregir y está seguro (en la medida en que mantiene intercambios regulares con los editores W3C y WHATWG) de que debe tener una solución que funcione y esta solución no afectará el estilo de otra cosa que no sea el error que está compensando.

Cuando tienes un elemento de 100% de ancho padding: 50px;, efectivamente obtienes width: calc(100% + 100px);. Dado marginque no se agrega al width, no causará problemas de diseño inesperados cuando se usa marginen child elementslugar de paddingdirectamente en el elemento.

Así que si estás no haciendo una de esas dos cosas no sin agregar relleno al elemento, pero a ella es / hijos elemento (s) hijo directo para asegurarse de que va a conseguir el esperado comportamiento en todos los navegadores.

Primero veamos cuáles son las diferencias y cuál es cada responsabilidad:

1) Margen

Las propiedades de margen CSS se utilizan para generar espacio alrededor de los elementos.
Las propiedades de margen establecen el tamaño del espacio en blanco fuera del borde. Con CSS, tienes control total sobre los márgenes.
Hay propiedades CSS para configurar el margen para cada lado de un elemento (arriba, derecha, abajo e izquierda).

2) Relleno

Las propiedades de relleno CSS se utilizan para generar espacio alrededor del contenido.
El relleno borra un área alrededor del contenido (dentro del borde) de un elemento.
Con CSS, tienes control total sobre el relleno. Hay propiedades CSS para configurar el relleno para cada lado de un elemento (arriba, derecha, abajo e izquierda).

Entonces, simplemente los márgenes son espacios alrededor de los elementos, mientras que los rellenos son espacios alrededor del contenido que son parte del elemento.

Esta imagen de codemancers muestra cómo se unen el margen y los bordes y cómo el cuadro de borde y el cuadro de contenido lo hacen diferente.

También definen cada sección de la siguiente manera:

• Contenido : define el área de contenido del cuadro donde reside el contenido real, como texto, imágenes u otros elementos.
• Relleno : esto borra el contenido principal de su caja de contenido.
  
• Borde : rodea tanto el contenido como el relleno.
• Margen : esta área define un espacio transparente que lo separa de otros elementos.

Siempre uso este principio:

Este es el modelo de caja de la función de elemento de inspección en Firefox. Funciona como una cebolla:

• Tu contenido está en el medio.
• El relleno es espacio entre su contenido y el borde de la etiqueta que está dentro.
• La frontera y sus especificaciones.
• El margen es el espacio alrededor de la etiqueta.

Por lo tanto, los márgenes más grandes harán más espacio alrededor del cuadro que contiene su contenido.

Un relleno más grande aumentará el espacio entre su contenido y la caja en la que se encuentra.

Ninguno de ellos aumentará o disminuirá el tamaño del cuadro si se establece en un valor específico.

Margen

El margen generalmente se usa para crear un espacio entre el elemento en sí y su entorno.

por ejemplo, lo uso cuando estoy construyendo una barra de navegación para que se adhiera a los bordes de la pantalla y sin espacios en blanco.

Relleno

Usualmente uso cuando tengo un elemento dentro de un borde, <div> o algo similar, y quiero disminuir su tamaño, pero en ese momento quiero mantener la distancia o el margen entre los otros elementos a su alrededor.

Brevemente, es situacional; Depende de lo que estés tratando de hacer.

El margen está fuera de la caja y el relleno está dentro de la caja.