Cuándo usar margen vs relleno en CSS

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

TL; DR: Por defecto, uso el margen en todas partes, excepto cuando tengo un borde o fondo y quiero boost 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 colapsan 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. Entonces terminará con el contenido del primer elemento, seguido del relleno del primer elemento, seguido del relleno del segundo, seguido del contenido del segundo elemento. Por lo tanto, el contenido de los dos elementos terminará siendo 2em aparte.

Ahora reemplace ese relleno con margen de 1em. Los márgenes se consideran fuera del elemento y los márgenes de los elementos adyacentes se superponen. Por lo tanto, en este ejemplo, terminará con el contenido del primer elemento seguido de 1em de margen combinado seguido del contenido del segundo elemento. Entonces, el contenido de los dos elementos está solo a 1 em de distancia.

Esto puede ser realmente útil cuando sabes que quieres decir 1em de espaciado alrededor de un elemento, independientemente del elemento al que se encuentre.

Las otras dos grandes diferencias son que el relleno está incluido en la región de clics y el color / imagen de fondo, pero no en el margen.

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

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

enter image description here

Lo mejor que he visto al explicar esto con ejemplos, diagtwigs e incluso una vista de “pruébalo tú mismo” está aquí .

El siguiente diagtwig creo que da una comprensión visual instantánea de la diferencia.

enter image description here

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 border box está experimentando un regreso con Bootstrap 3 que lo soporta.

MARGIN 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 una 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 del margen Vs Padding – Propiedades de CSS

Margen vs Padding

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

Compare los elementos del bloque con las imágenes colgadas en la pared:

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

Cuando se decide entre margen y relleno, es una buena regla general usar el margen cuando se está espaciando un elemento en relación con otras cosas en la pared, y el relleno cuando se 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 1 .

1 Este modelo de caja por defecto se puede modificar con el atributo de box-sizing .

Aquí hay un poco de HTML que demuestra cómo el padding y el margin afectan la capacidad de clics y el llenado de fondo. Un objeto recibe clics en su relleno, pero hace clic en un área con margen de objetos para ir a su elemento primario.

 $(".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; } 
  

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

Como 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, en general, empiezo usando almohadillas para ” packed ” todo y luego usar márgenes para ajustes menores.

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

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

enter image description here

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

tenga en cuenta que algunas veces debe usar margen.

Cuándo usar los márgenes y el relleno

Hay dos formas en CSS para crear espacio alrededor de sus elementos: márgenes y relleno. En la mayoría de los escenarios de uso, son funcionalmente idénticos, pero en realidad, se comportan de maneras ligeramente diferentes. Hay diferencias importantes entre los márgenes y el relleno que debe tener en cuenta al elegir cuál usar para mover los elementos alrededor de la página. Sin embargo, en los casos en que los márgenes o el relleno se pueden utilizar para el mismo efecto, gran parte de la decisión se reduce a las preferencias personales.

Cuándo usar los márgenes

  1. Desea que su espaciado aparezca fuera de la “caja” creada por una propiedad de borde. Los márgenes se encuentran fuera de las fronteras, por lo que los usaría si desea que su frontera permanezca en un lugar. Esto puede ser útil si tiene, por ejemplo, una barra lateral con un borde que desea alejarse de su área de contenido principal.

  2. No desea que su color de fondo o imagen invada su espacio personal. Los colores e imágenes de fondo se detienen en el borde, por lo que si prefiere mantener sus fondos fuera del espacio que está creando, los márgenes son la propiedad que desea.

  3. Te gustaría espacio plegable en la parte superior e inferior de tu elemento. Los márgenes superior e inferior se comportan de forma diferente que los márgenes laterales, ya que si dos márgenes están uno encima del otro, colapsan al tamaño del conjunto de márgenes más grande. Por ejemplo, si configuro el párrafo para que tenga un margen superior de 20 píxeles y un margen inferior de 15 píxeles, solo tendré 20 píxeles de espacio total entre párrafos (los dos márgenes se colapsan y el más grande gana) .

Cuándo usar relleno

  1. Quieres que todo el espacio que estás creando esté dentro de tu frontera. El relleno está dentro de sus bordes, por lo que es útil para alejar sus bordes del contenido dentro de su elemento.

  2. Necesitas tu color / imagen de fondo para continuar en el espacio que estás creando. Su fondo continuará detrás de su relleno, así que solo úselo si desea que su fondo se asome.

  3. Desea que su espacio superior e inferior se comporte de forma más rígida. Por ejemplo, si establece los párrafos en su documento para tener un relleno superior de 20 píxeles y un relleno inferior de 15 píxeles, cada vez que tenga dos párrafos en una fila, en realidad tienen un total de 35 píxeles de espacio entre ellos.

Explicación de las diferentes partes:

Contenido: el contenido del cuadro, donde aparecen texto e imágenes

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

Borde: un borde que rodea el relleno y el contenido

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

Mostrando varias partes

Aquí está el ejemplo en vivo: (juegue cambiando los valores) http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

Una cosa a tener en cuenta es cuando los márgenes de colapso automático te molestan (y no estás usando colores de fondo en tus elementos), algo es más fácil de usar.

Margen avanzado versus relleno explicado

No es apropiado usar padding para espaciar el contenido de un elemento; debe utilizar margin en el elemento secundario en su lugar. Navegadores más antiguos como Internet Explorer malinterpretaron el modelo de caja, excepto cuando se trataba de usar un margin que funcionaba perfectamente en Internet Explorer 4 .

Hay dos excepciones cuando se usa el padding : uso apropiado:

  1. Se aplica a un elemento en línea que no puede contener ningún elemento secundario, 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 mantenga intercambios regulares con los editores W3C y WHATWG) de que debe tener una solución funcional y esta solución no afectará el diseño de otra cosa que no sea el error que está compensando.

Cuando tienes un elemento de 100% de ancho con padding: 50px; efectivamente obtienes width: calc(100% + 100px); . Como el margin no se agrega al width , no causará problemas de diseño inesperados cuando use margin en child elements lugar de padding directamente en el elemento.

Por lo tanto, si no está haciendo una de esas dos cosas, no agregue relleno al elemento, sino a su elemento directo hijo / hijo para asegurarse de que obtendrá el comportamiento esperado en todos los navegadores.

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

1) Margen

Las propiedades de margen de 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 establecer el margen para cada lado de un elemento (arriba, derecha, abajo e izquierda).

2) Relleno

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

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

Margen y relleno

Esta imagen de codemancers muestra cómo el margen y los bordes se unen y cómo border box y content-box 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 o tal vez otros elementos.
  • Relleno : esto borra el contenido principal de su caja contenedora.
  • Borde : esto rodea tanto el contenido como el relleno.
  • Margen : esta área define un espacio transparente que lo separa de otros elementos.

El margen de CSS, el relleno y el borde son propiedades del modelo de caja.

  • El margen es espacio fuera del contenido.
  • El relleno es espacio dentro del contenido.
  • El borde es un contorno visible (cualquier color, estilo y ancho) fuera del relleno.

Ancho total = ancho del contenido + relleno + borde.

Es bueno saber las diferencias entre el margin y el padding . Aquí hay algunas diferencias:

  • El margen es el espacio exterior de un elemento, mientras que el espacio interior es el espacio interior de un elemento.
  • Margen es el espacio que se encuentra fuera del borde de un elemento, mientras que Relleno es el espacio dentro del borde del mismo.
  • El margen acepta el valor de auto: margin: auto , pero no puede configurar el relleno en automático.
  • El margen se puede establecer en cualquier número, pero el relleno debe ser no negativo.
  • Cuando aplica estilo a un elemento, también afectará al relleno (por ejemplo, color de fondo), pero no al margen.

Margen

El margen generalmente se utiliza 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 para que no haya espacio blanco.

Relleno

Normalmente uso cuando tengo un elemento dentro de un borde,

o algo similar, y quiero disminuir su tamaño, pero en el momento quiero mantener la distancia o el margen entre los otros elementos a su alrededor.

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

Yo siempre uso este principio:

imagen del modelo de caja

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 el espacio entre su contenido y el borde de la etiqueta en el interior.
  • El borde y sus especificaciones
  • El margen es el espacio alrededor de la etiqueta.

Por lo tanto, márgenes más grandes harán más espacio alrededor de la caja que contiene su contenido.

Un relleno más grande boostá el espacio entre su contenido y la caja de la que está dentro.

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

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