Diferencia entre el margen y el relleno?

¿Cuál es exactamente la diferencia entre el margen y el relleno en CSS? Realmente no parece servir mucho. ¿Podría darme un ejemplo de dónde se encuentran las diferencias (y por qué es importante conocer la diferencia)?

padding es el espacio entre el contenido y el border , mientras que el margin es el espacio fuera del borde. Aquí hay una imagen que encontré de una búsqueda rápida en Google, que ilustra esta idea.

enter image description here

Una cosa clave que falta en las respuestas aquí:

Los márgenes superior / inferior son plegables.

Entonces, si tiene un margen de 20 píxeles en la parte inferior de un elemento y un margen de 30 píxeles en la parte superior del siguiente elemento, el margen entre los dos elementos será de 30 píxeles en lugar de 50 píxeles. Esto no se aplica al margen izquierdo / derecho o relleno.

El margen se aplica al exterior de su elemento y, por lo tanto, afecta la distancia de su elemento con respecto a otros elementos.

El relleno se aplica al interior de su elemento y, por lo tanto, afecta el grado de alejamiento del contenido de su elemento del borde.

Además, usar el margen no afectará las dimensiones de su elemento, mientras que el relleno hará que las dimensiones de los elementos (establecer altura + relleno) así, por ejemplo, si tiene un div 100x100px con un relleno de 5 px, su div será realmente 105x105px

La defensa más simple es; relleno es un espacio dado dentro del borde del elemento contenedor y el margen se da afuera. Para un elemento que no es un contenedor, el relleno puede no tener mucho sentido, pero el margen, sin duda, ayudará a organizarlo.

Recuerda estos 3 puntos:

  • El Margen es el espacio extra alrededor del control.
  • El relleno es espacio adicional dentro del control.
  • El Relleno de un control externo es el Margen de un control interno .

Imagen de demostración: (donde la caja roja es control de deseo) enter image description here

Relleno

El relleno es una propiedad de CSS que define el espacio entre el contenido de un elemento y su borde (si tiene un borde). Si un elemento tiene un borde alrededor, el relleno proporcionará espacio desde ese borde hasta el contenido del elemento que aparece en ese borde. Si un elemento no tiene un borde alrededor, entonces agregar relleno no tiene ningún efecto en ese elemento, porque no hay borde para dar espacio.

Margen

Margin es una propiedad de CSS que define el espacio de fuera de un elemento en su próximo elemento externo.

El margen afecta a los elementos que tienen o no tienen fronteras. Si un elemento tiene un borde, el margen define el espacio desde este borde hasta el siguiente elemento externo. Si un elemento no tiene un borde, entonces el margen define el espacio del contenido del elemento al siguiente elemento externo.

Diferencia entre relleno y margen

Entonces, la diferencia entre el margen y el relleno es que mientras el relleno se relaciona con el espacio interior, el margen trata el espacio exterior con el siguiente elemento externo.

El relleno es el espacio dentro del borde, mientras que el margen es el espacio fuera del borde.

margen = espacio alrededor (afuera) del elemento desde el borde hacia afuera.

relleno = espacio alrededor (dentro) del elemento desde el texto hasta el borde.

mira aquí: http://jsfiddle.net/robx/GaMpq/

Una de las principales diferencias entre margen y relleno no se menciona en ninguna de las respuestas: capacidad de clics y detección de desplazamiento

Aumentar el relleno aumenta el tamaño efectivo del elemento. A veces tengo un icono pequeño que no quiero que sea visiblemente más grande, pero el usuario aún necesita interactuar con ese ícono. Aumento el relleno del icono para darle una mayor huella para clics y vuelo estacionario. Aumentar el margen del icono no tendrá el mismo efecto.

Una respuesta a otra pregunta sobre este tema da un ejemplo.

Es bueno saber sobre las diferencias entre el margin y el padding . Que yo sé:

  • Margen es el espacio exterior de un elemento, mientras que el relleno es el espacio interior de un elemento. En otras palabras, margen es el espacio fuera del borde de un elemento, mientras que el relleno es el espacio dentro de su borde.
  • Puede establecer el valor auto en margen. Sin embargo, no está permitido para el relleno. Mira esto
    Nota: Use margin: auto para centrar un elemento de bloque dentro de su padre horizontalmente. Además, es posible centrar un elemento dentro de un flexbox vertical u horizontalmente o ambos, estableciendo el margen en automático. Mira esto
  • El margen puede ser cualquier número flotante, pero el relleno no debe ser negativo.
  • Cuando aplica estilo a un elemento, el relleno también se diseñará; pero no margen El margen obtiene el estilo del elemento principal. Por ejemplo, cuando establece la propiedad de background-color en negro, su espacio interior (es decir, relleno) será negro, pero no su espacio exterior (es decir, margen).

El margen es espacio fuera de la caja; el relleno es espacio dentro de la caja. Es difícil ver la diferencia con un relleno blanco, pero con un relleno de color se puede ver bien.

enter image description here

El margen es el espacio personal de un elemento: la distancia que el elemento desea mantener con otros elementos a su alrededor.

El relleno es cuánto se aleja un elemento de sí mismo: cuánta distancia desea mantener un elemento con los elementos que contiene.

Ambos se usan para crear vacíos alrededor de los elementos, pero difieren en su método de crear esa brecha. El margen acomoda la brecha al empujar los elementos adyacentes lejos de ella, mientras que la almohadilla acomoda la brecha al boost su propio tamaño o al reducir el tamaño del contenido en su interior.

Por defecto, el relleno incrementará el tamaño del elemento para acomodar el espacio. Pero si configura “box-sizing: border-box” en el elemento, reducirá el tamaño del contenido dentro del elemento para acomodar el espacio.

Use relleno cuando:

No desea que su contenido toque los bordes del contenedor. Ejemplo: tienes un montón de

elementos dentro de un div y no quieres el texto dentro

elementos para tocar el borde del div:

enter image description here

Usar margen cuando:

Desea tener algo de espacio alrededor de un elemento, o no quiere que el elemento toque otros elementos a su alrededor:

enter image description here

Margen y relleno son ambos tipos de relleno realmente … Uno (margen) sale del borde de los elementos para alejarlo de otros elementos y el otro (relleno) va fuera del contenido de los elementos para distanciar el contenido del borde de los elementos.

El relleno permite al desarrollador mantener espacio entre el texto y su elemento circundante. Margen es el espacio que el elemento mantiene con otro elemento del DOM principal.

Ver ejemplo:

   Pseudo Elements    
Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text.

Intenta poner un color de fondo en un bloque div con ancho y alto. Verá que el relleno aumenta el tamaño del elemento, mientras que el margen simplemente lo mueve dentro del flujo del documento.

El margen es específicamente para cambiar el elemento.

Hay una diferencia importante:

Margen- está en el exterior del elemento, es decir, uno aplicará el cambio de espacio en blanco “después” de que el elemento comience. Relleno: está en el interior, el otro aplicará el espacio en blanco “antes” de que comience el elemento.

El margen se aplica al exterior de su elemento y, por lo tanto, afecta la distancia de su elemento con respecto a otros elementos.

El relleno se aplica al interior de su elemento y, por lo tanto, afecta el grado de alejamiento del contenido de su elemento del borde.

Además, usar el margen no afectará las dimensiones de su elemento, mientras que el relleno hará que las dimensiones de los elementos (establecer altura + relleno) así, por ejemplo, si tiene un div 100x100px con un relleno de 5 px, su div será realmente 105x105px

El relleno es el espacio entre los componentes más cercanos en la página web y el margen es el espacio del margen de la página web.

Básicamente, la diferencia entre el relleno y el margen viene en términos del fondo. El relleno decidirá el espacio entre el contenido, mientras que el margen decidirá el borde exterior de los elementos.

El relleno es el espacio entre su contenido y el borde. Donde como Margen es el espacio entre el borde y el otro elemento.