css que - Cuándo usar margen vs relleno en CSS




9 Answers

TL; DR: De manera predeterminada, uso el margen en todas partes, excepto cuando tengo un borde o fondo y quiero aumentar 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 contraen 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. Así que terminará con el contenido del primer elemento, seguido del relleno del primer elemento, seguido del relleno del segundo elemento, seguido del contenido del segundo elemento. Así, el contenido de los dos elementos terminará separándose.

Ahora reemplaza ese relleno con 1em de margen. Se considera que los márgenes están fuera del elemento, y los márgenes de los elementos adyacentes se superpondrán. Entonces, en este ejemplo, terminará con el contenido del primer elemento seguido de 1em de margen combinado seguido del contenido del segundo elemento. Así que el contenido de los dos elementos es solo 1em aparte.

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

Las otras dos grandes diferencias son que el relleno se incluye en la región de clic y el color / imagen de fondo, pero no el margen.

poner pagina

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




Lo mejor que he visto explicando esto con ejemplos, diagramas e incluso una vista de "pruébalo tú mismo" está here .

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

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 manténlo al tanto de los cálculos de diseño. También tenga en cuenta que el cuadro de borde está viendo algo así como una reaparición con Bootstrap 3 que lo admite.




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

Compara los elementos del bloque con las imágenes colgadas en una pared:

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

Al decidir entre margen y relleno, es una buena regla empírica utilizar el margen cuando se está espaciando un elemento en relación con otras cosas en la pared, y el relleno cuando se ajusta la apariencia del elemento en sí. El margen no cambiará el tamaño del elemento, pero el relleno normalmente hará que el elemento sea más grande 1 .

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




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

Al igual que cuando le das algo a {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 generalmente comienzo usando rellenos para hacer que todo esté " packed " y luego uso márgenes para pequeños ajustes.

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




Cuándo usar márgenes y 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 formas ligeramente diferentes. Existen diferencias importantes entre los márgenes y el relleno que debe tener en cuenta al elegir cuál usar para mover elementos alrededor de la página. Sin embargo, en aquellos casos en los que los márgenes o el relleno se podrían usar para el mismo efecto, gran parte de la decisión se reduce a las preferencias personales.

Cuando usar márgenes

  1. Desea que su espaciado aparezca fuera del "cuadro" creado por una propiedad de borde. Los márgenes se encuentran fuera de los límites, por lo que los usaría si desea que su borde permanezca en un solo lugar. Esto puede ser útil si, por ejemplo, tiene una barra lateral con un borde que desea alejar de su área de contenido principal.

  2. No quieres que el color de fondo o la imagen invadan tu espacio personal. Los colores de fondo y las imágenes se detienen en el borde, por lo que si prefiere mantener sus fondos fuera del espacio que está haciendo, los márgenes son la propiedad que desea.

  3. Te gustaría tener un espacio plegable en la parte superior e inferior de tu elemento. Los márgenes superior e inferior se comportan de manera diferente a los márgenes laterales, ya que si dos márgenes están uno encima del otro, se colapsan al tamaño del mayor conjunto de márgenes. 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é un total de 20 píxeles de espacio entre los párrafos (los dos márgenes se colapsan entre sí, y el más grande gana) .

Cuándo usar el relleno

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

  2. Necesita el color / imagen de fondo para continuar en el espacio que está creando. Tu fondo continuará detrás de tu relleno, así que solo úsalo si quieres que tu fondo se vea.

  3. Usted quiere que su espacio superior e inferior se comporten de manera más rígida. Por ejemplo, si configura los párrafos de su documento para que tengan un relleno superior de 20 píxeles y un relleno inferior de 15 píxeles, entonces, cada vez que tenga dos párrafos seguidos, tendrán un total de 35 píxeles de espacio. entre ellos.




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




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

1) Margen

Las propiedades del 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.
Existen 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 utilizan para generar espacio alrededor del contenido.
El relleno borra un área alrededor del contenido (dentro del borde) de un elemento.
Con CSS, tienes control total sobre el relleno. Existen propiedades 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.

Esta imagen de los codemancers muestra cómo los márgenes y los bordes se juntan y cómo el cuadro de borde y el cuadro de contenido lo hacen diferente.

También definen cada sección de la siguiente manera:

  • Contenido : esto define el área de contenido del cuadro donde se encuentra el contenido real, como texto, imágenes u 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 CSS, el relleno y el borde son propiedades del modelo de caja.

  • El margen es el 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 de contenido + relleno + borde.




Yo siempre uso este principio:

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 el contenido y el borde de la etiqueta que está dentro.
  • La frontera y sus especificaciones.
  • El margen es el espacio alrededor de la etiqueta.

Así que márgenes más grandes harán más espacio alrededor de la caja que contiene su contenido.

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

Ninguno de ellos aumentará o disminuirá el tamaño de la caja si se establece en un valor específico.




Related

css padding margin