¿Diferencia entre margen y relleno?

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

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

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 ni al relleno.

El margen se aplica al exterior de su elemento, lo que 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 la distancia del contenido de su elemento del borde.

Además, el uso del margen no afectará las dimensiones de su elemento, mientras que el relleno hará que las dimensiones de sus elementos (altura establecida + relleno), por ejemplo, si tiene un div de 100x100px con un relleno de 5 px, su div sea en realidad 105x105px

Recuerda estos 3 puntos:

• El margen es el espacio extra alrededor del control.
• El acolchado es espacio extra dentro del control.
• El relleno de un control externo es el margen de un control interno .

Imagen de demostración: (donde el cuadro rojo es el control del deseo)

La defensa más simple es; El 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 un margen defensivo ayudará a organizarlo.

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

Relleno

El relleno es una propiedad 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 dará espacio desde ese borde al contenido del elemento que aparece en ese borde. Si un elemento no tiene un borde a su alrededor, la adición de relleno no tiene ningún efecto en ese elemento, ya que no hay un borde para dar espacio.

Margen

El margen es una propiedad CSS que define el espacio exterior de un elemento a su próximo elemento exterior.

El margen afecta a los elementos que tienen o no tienen bordes. 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, el margen define el espacio desde el contenido del elemento hasta el siguiente elemento externo.

Diferencia entre relleno y margen

Entonces, la diferencia entre el margen y el relleno es que, si bien el relleno trata con el espacio interior, el margen trata con el espacio exterior para el siguiente elemento exterior.

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

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

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

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

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

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

Es bueno saber sobre las diferencias entre marginy padding. Que yo sé:

• El margen es el espacio exterior de un elemento, mientras que el relleno es el espacio interior de un elemento. En otras palabras, el margen es el espacio fuera del borde de un elemento, mientras que el relleno es el espacio dentro de su borde.
• Puede establecer el autovalor al margen. Sin embargo, no está permitido el relleno. Mira esto .
  Nota: Use margin: autopara centrar un elemento de bloque dentro de su elemento primario horizontalmente. Además, es posible centrar un elemento dentro de un flexbox vertical u horizontalmente o ambos, configurando el margen en automático. Mira esto .
• El margen puede ser cualquier número flotante, pero el relleno no debe ser negativo.
• Cuando diseñe un elemento, también se aplicará el relleno; Pero no margen. El margen obtiene el estilo del elemento padre. Por ejemplo, cuando establece la background-colorpropiedad 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 puedes verlo bien.

El margen y el relleno son ambos tipos de relleno realmente ... Uno (margen) sale del borde de los elementos para distanciarlo de otros elementos y el otro (relleno) sale del contenido de los elementos para distanciar el contenido del borde de los elementos.

El relleno permite al desarrollador mantener el espacio entre el texto y su elemento envolvente. El margen es el espacio que el elemento mantiene con otro elemento del DOM padre.

Ver ejemplo:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UT-8">
    <title>Pseudo Elements</title>
    <style type="text/css">
        body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;}
        .page
        {
            background-color: #fff;
            padding: 10px 30px 50px 50px;
            margin:30px 100px 30px 300px;
        }
    </style>
</head>
<body>
    <div class="page">
        Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text. 
    </div>
</body>

El margen es una propiedad en CSS que se usa para crear espacios alrededor de los elementos, fuera del borde. El programador puede establecer el margen superior, derecho, inferior e izquierdo. En otras palabras, puede establecer esos valores usando margin-top, margin-right, margin-bottom y margin-left.

Los valores de margen pueden ser de los siguientes tipos.

Primero, auto permite que el navegador calcule el margen. Además, la longitud denota un margen en px, pt o cm, mientras que% ayuda a describir un margen como un porcentaje relativo al ancho del elemento contenedor. Finalmente, heredar denota que el margen tiene que heredar del elemento padre.

El relleno es una propiedad en CSS que ayuda a crear espacio alrededor de un elemento dentro del borde. El programador puede configurar el relleno para arriba, derecha, abajo e izquierda. En otras palabras, puede establecer esos valores usando padding-top, padding-right, padding-bottom y padding-left.

Los valores de Relleno pueden ser de los siguientes tipos.

La longitud describe el relleno en px, pt o cm, mientras que% denota el relleno como un porcentaje relativo al ancho del elemento contenedor. Finalmente, heredar describe que el relleno debe heredarse del elemento padre.

 div.special {
          width:200px; 
          border-style: solid; 
          border-width:thin; 
          border-color:#000;
          margin:30px 20px 10px 25px;
}     
div.special2 {
          width:200px;
          border-style: solid;
          border-width:thin;
          border-color:#000;
          padding:30px 20px 10px 25px;
}        

<div class="special">
             Hello its margin test 
</div>
<div class="special2">
            Hello its padding test
</div>

Diferencia entre margen y relleno

El margen es una propiedad CSS que se usa para crear espacio alrededor del elemento fuera del borde definido, mientras que el relleno es una propiedad CSS que se usa para crear espacio alrededor del elemento, dentro del borde definido. Por lo tanto, esto explica la principal diferencia entre margen y relleno.

Valores Además, los valores de margen pueden ser automáticos, longitud,% o heredar, mientras que los valores de relleno pueden ser longitud,% o tipo de herencia. Por lo tanto, esta es otra diferencia entre margen y relleno.

En resumen, el margen y el relleno son dos propiedades en CSS que permiten diseñar las páginas web. No es posible asignar valores negativos para esas propiedades. La principal diferencia entre margen y relleno es que el margen ayuda a crear espacio alrededor del elemento fuera del borde, mientras que el relleno ayuda a crear espacio alrededor del elemento dentro del borde.

Intente 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.

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

Una cosa que acabo de notar pero ninguna de las respuestas anteriores mencionó. Si tengo un elemento DOM creado dinámicamente que se inicializa con contenido html interno vacío, es una buena práctica usar margen en lugar de relleno si no desea que este elemento vacío ocupe ningún espacio excepto que se cree su contenido.

Hay una diferencia importante:

Margen: está en el exterior del elemento, es decir, se aplicará el cambio de espacio en blanco "después" de que comience el elemento. El 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, lo que 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 la distancia del contenido de su elemento del borde.

Además, el uso del margen no afectará las dimensiones de su elemento, mientras que el relleno hará que las dimensiones de sus elementos (altura establecida + relleno), por ejemplo, si tiene un div de 100x100px con un relleno de 5 px, su div sea en realidad 105x105px

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 tu contenido y el borde. Donde como Margen es el espacio entre el borde y el otro elemento.