css - que - ¿Diferencia entre margen y relleno?
padding top css ejemplos (21)
¿Cuál es exactamente la diferencia entre el margen y el 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)?
Básicamente, la diferencia entre el relleno y el margen vienen en términos de fondo. El relleno decidirá el espacio entre el contenido, mientras que el margen decidirá el borde exterior de los elementos.
El margen se aplica al exterior de su elemento, por lo tanto, afecta la distancia a la que se encuentra su elemento de otros elementos.
El relleno se aplica al interior de su elemento, por lo que afecta la distancia a la que se encuentra el contenido de su elemento.
Además, el uso del margen no afectará las dimensiones de su elemento, mientras que el relleno hará que las dimensiones de sus elementos (ajuste altura + relleno), por ejemplo, si tiene un div de 100x100px con un relleno de 5 px, su div será en realidad 105x105px
El margen se aplica al exterior de su elemento, por lo tanto, afecta la distancia a la que se encuentra su elemento de otros elementos.
El relleno se aplica al interior de su elemento, por lo que afecta la distancia a la que se encuentra el contenido de su elemento.
Además, el uso del margen no afectará las dimensiones de su elemento, mientras que el relleno hará que las dimensiones de sus elementos (ajuste altura + relleno), por ejemplo, si tiene un div de 100x100px con un relleno de 5 px, su div será en realidad 105x105px
El margen y el relleno son ambos tipos de relleno realmente ... Uno (margen) va fuera del borde de los elementos para distanciarlo de otros elementos y el otro (relleno) sale del contenido de los elementos para alejar el contenido del borde de los elementos.
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.
El relleno es el espacio entre tu contenido y el borde. Donde como Margen es el espacio entre el borde y el otro elemento.
El relleno es espacio dentro del borde, mientras que Margen es espacio fuera del borde.
El relleno permite al desarrollador mantener espacio entre el texto y su elemento de cierre. 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>
Es bueno saber acerca de las diferencias entre margin y 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, 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
autoal margen. Sin embargo, no está permitido para el relleno. Ver esto
Nota: Usemargin: autopara centrar un elemento de bloque dentro de su padre de forma horizontal. Además, es posible centrar un elemento dentro de un flexbox vertical u horizontalmente o ambos, estableciendo el margen en automático. Ver esto - El margen puede ser cualquier número flotante, pero el relleno no debe ser negativo.
- Cuando estilice un elemento, el relleno también se estilizará; pero no el margen. Margen obtiene el estilo del elemento padre. Por ejemplo, cuando configura la propiedad de
background-coloren negro, su espacio interior (es decir, relleno) será negro, pero no su espacio exterior (es decir, margen).
Hay una diferencia importante:
Margen- está en el exterior del elemento, es decir, uno aplicará el desplazamiento del 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.
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.
La definición 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 definitivamente el margen ayudará a organizarlo.
Una cosa clave que falta en las respuestas aquí:
Los márgenes superior / inferior son plegables.
Por lo tanto, 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 elemento siguiente, 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 al relleno.
Una de las diferencias clave entre el margen y el relleno no se menciona en ninguna de las respuestas: la capacidad de hacer clic y la 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 todavía necesita interactuar con ese icono. Incremento el relleno del icono para darle una huella más grande para clics y 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.
padding = espacio alrededor (dentro) del elemento del texto al borde.
Consulte aquí: http://jsfiddle.net/robx/GaMpq/
El margen es el espacio personal de un elemento: cuánta distancia desea mantener el elemento con otros elementos que lo rodean.
El relleno es cuánto se aleja un elemento de sí mismo, cuánta distancia desea mantener un elemento con los elementos que se encuentran dentro de él.
Ambos se utilizan para crear brechas alrededor de los elementos, pero difieren en su método para crear esa brecha. El margen acomoda la brecha al empujar los elementos adyacentes hacia afuera, mientras que el Relleno acomoda la brecha ya sea aumentando su propio tamaño o reduciendo el tamaño del contenido dentro de ella.
De forma predeterminada, el relleno aumentará el tamaño del elemento para acomodar el espacio. Pero si establece "box-sizing: border-box" en el elemento, entonces reducirá el tamaño del contenido dentro del elemento para acomodar el espacio.
Use relleno cuando:
No quieres que tu contenido toque los bordes del contenedor. Ejemplo: tienes un montón de
Elementos dentro de un div y no quieres que el texto dentro
Elementos para tocar el borde del div:
Use el margen cuando:
Desea tener algo de espacio alrededor de un elemento, o no quiere que el elemento toque otros elementos a su alrededor:
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é en una búsqueda rápida en Google, que ilustra esta idea.
El margen es el 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.
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 a su 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, entonces agregar relleno no tiene ningún efecto en absoluto en ese elemento, porque no hay un borde desde el cual dar espacio.
Margen
El margen es una propiedad CSS que define el espacio de fuera de un elemento a su siguiente elemento externo.
El margen afecta a elementos que tienen o no bordes. Si un elemento tiene un borde, el margen define el espacio desde este borde hasta el siguiente elemento exterior. Si un elemento no tiene un borde, el margen define el espacio desde el contenido del elemento hasta el siguiente elemento externo.
Diferencia entre el relleno y el margen
Así que la diferencia entre el margen y el relleno es que mientras el relleno se ocupa del espacio interior, el margen se ocupa del espacio exterior al siguiente elemento externo.