2011-05-11 16 views
268

¿Cuál es exactamente la diferencia entre margen y 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)?¿Diferencia entre el margen y el relleno?

+11

http://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css http://stackoverflow.com/questions/3060456/difference-bw-padding y margen http: // stackoverflow.com/questions/4619899/difference-between-a-views-padding-and-margin Primeros tres enlaces de la búsqueda 'relleno vs margen'. Creo que necesitamos agregar flechas a la barra de búsqueda y hacer verde. – William

+1

Esto puede ayudarlo a comprender la diferencia http://www.digizol.com/2006/12/margin-vs-padding-css-properties.html – lkamal

+1

También tenga en cuenta que Internet Explorer suma los márgenes/bordes/anchos de relleno de forma diferente (en modo predeterminado no peculiar) que casi todos los demás navegadores. –

Respuesta

27

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.

8

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

relleno = espacio alrededor (dentro) del elemento del texto al borde.

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

4

Margen es el espacio fuera de la caja; relleno es el 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.

312

padding es el espacio entre el contenido y border, mientras que 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

+1

Consulte también estos sitios para obtener una definición. Pero el gráfico es una ilustración perfecta. http://www.w3schools.com/css/css_margin.asp http://www.w3schools.com/css/css_padding.asp – Suroot

+0

@maclunian: También consulte este sitio http: //www.w3schools .com/css/css_boxmodel.asp además de los enlaces de @ Suroot arriba. – abcd

+0

¿Cómo se relaciona esto con el conjunto Ancho y Alto del contenido? ¿Dónde está eso medido en todo esto? – Nyerguds

0

trate de poner un color de fondo de un div bloque con anchura y altura. 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ífico para cambiar el elemento.

55

El margen se aplica al fuera de de su elemento por lo tanto afectando a qué distancia está su elemento alejado de otros elementos.


El relleno se aplica a la dentro de su elemento, por lo tanto afectando hasta qué punto el contenido de su elemento es lejos de la frontera.

Además, el uso de margen no afectará a las dimensiones de su elemento, mientras que el relleno hará que sus elementos de dimensiones (altura set + relleno) Así, por ejemplo si usted tiene un div 100x100px con un relleno de 5 píxeles, el div en realidad será 105x105px

+11

Creo que el relleno se aplica a todos los lados, por lo que el elemento sería 110x110px – 2013Asker

+0

Ehm, el relleno de afaik no cambia el ancho de su elemento si ese ancho se ha establecido en cualquier otra cosa que no sea 'auto'. Si el ancho es 'auto', entonces el relleno adicional aumentará el ancho del elemento acolchado en consecuencia (y de ambos lados, como se mencionó @ 2013Asker) – Flater

+1

Creo que es un poco engañoso decir que tu div será 110px por 110px porque el ancho de su div seguirá siendo 100px (suponiendo que el tamaño de la caja se establece como cuadro de contenido). – wmock

0

Hay una diferencia importante:

Margen- está en el exterior del elemento, es decir, se aplicará el desplazamiento de espacio en blanco "después" de que comience el elemento. Relleno: está en el interior, el otro aplicará el espacio en blanco "antes" de que comience el elemento.

0

El margen se aplica a la parte exterior del 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 la distancia entre el contenido de su elemento y el borde.

Además, el uso de margen no afectará a las dimensiones de su elemento, mientras que el relleno hará que sus elementos de dimensiones (altura set + relleno) Así, por ejemplo si usted tiene un div 100x100px con un relleno de 5 píxeles, el div en realidad será 105x105px

+0

¿Notaste que esta respuesta ya ha sido dada? - y con un énfasis añadido y apropiado? – JerryOL

2

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 de los elementos frontera.

89

Una cosa clave que falta en las respuestas aquí:

margen superior/inferior son plegables.

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

+2

Tenga en cuenta que hay circunstancias muy específicas en las que los márgenes verticales se colapsan, no solo cualesquiera dos márgenes verticales lo harán. Lo cual lo hace aún más confuso (a menos que esté * muy * familiarizado con el modelo de caja). – BoltClock

22

Recuerde estos 3 puntos:

  • El margen es el espacio adicional alrededor el control.
  • El relleno es espacio adicional dentro de el control.
  • El relleno de un control externo es el margen de un control interno.

Demo de la imagen: (en caja roja es el control de deseo) enter image description here

0

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.

-1

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.

2

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

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> 
19

relleno es espacio dentro la frontera, mientras que margen es el espacio fuera la frontera.

22

Relleno

El relleno es una propiedad CSS que define el espacio entre un elemento de contenido y su borde (si tiene una frontera). 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

margen es una propiedad CSS que define el espacio de la parte exterior de un elemento a su siguiente elemento exterior.

El margen afecta a los elementos que tienen bordes o no. 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 el relleno y el margen

Así que la diferencia entre el margen y el relleno es que mientras que ofertas de relleno con el espacio interior, ofertas de margen con el espacio exterior al siguiente elemento exterior.

+0

¿Qué elementos no tienen borde? –

-6

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

+1

Los márgenes no son tan simples, y esto no dice nada que una docena de respuestas anteriores no hayan dicho. – Quentin

+2

Acaba de repetir las respuestas anteriores. –

+2

esta respuesta ya está publicada anteriormente. – Bruce

6

Una de las principales diferencias entre margen y el relleno no se menciona en ninguna de las respuestas: clickability y libración detección

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.

An answer a otra pregunta sobre este tema da un ejemplo.

+0

La mayoría de las respuestas principales se refieren a que el relleno está "dentro" del elemento y los márgenes están "fuera" de él, lo que ya implica relleno contribuyendo a un área de clic más grande. Sin embargo, no es tan obvio cuando se trata de una caja completamente transparente ... – BoltClock

5

Es bueno saber sobre las diferencias entre margin y . Como sé:

  • margen es la espacio exterior de un elemento, mientras que el relleno es la 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 auto valor en margen. Sin embargo, no está permitido para el relleno. See this.
    Nota: Utilice margin: auto para centrar horizontalmente un elemento de bloque dentro de su elemento primario.
  • El margen puede ser cualquier número flotante, pero el relleno no debe ser negativo.
  • Cuando aplica un 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 configura la propiedad background-color en negro, su espacio interior (es decir, relleno) será negro, pero no su espacio exterior (es decir, margen).
Cuestiones relacionadas