Pregunta Cuándo usar margen vs relleno en CSS


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


1968
2018-02-03 03:20


origen


Respuestas:


TL; DR:  Por defecto, 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 relleno y margen es que vertical los márgenes 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.


1213
2018-02-07 20:59



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


1336
2018-02-03 03:22



Lo mejor que he visto al explicar esto con ejemplos, diagramas e incluso una vista de "pruébalo tú mismo" es aquí.

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

enter image description here

Una cosa a tener en cuenta son los navegadores compatibles con los estándares (IE peculiaridades es una excepción) renderice 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 el cuadro de borde está viendo algo así como regreso con Bootstrap 3 apoyándolo.


524
2018-05-04 19:21



MARGEN vs RELLENO :

  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.

Por favor, consulte la imagen a continuación extraída de Margen Vs Padding - Propiedades de CSS

Margin vs Padding


76
2018-05-21 07:00



Hay más explicaciones técnicas para su pregunta, pero si está buscando una forma de pensar en margen y 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:

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

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

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


72
2017-12-17 01:10



Aquí hay un poco de HTML que demuestra cómo padding y margin afecta 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;
}
<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div>


30
2018-02-09 05:29



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

Como cuando das algo {padding: 10px;}, deberás reducir el ancho del elemento 20px para mantener el 'ajuste'y no molestar a otros elementos a su alrededor.

Así que generalmente empiezo usando almohadillas para obtener todo 'packed'y luego usa los 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.


30
2018-02-03 05:35



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 dinámicos, le recomiendo que use relleno vs margen si puede.

tenga en cuenta que algunas veces debe usar margen.


27
2017-08-01 11:28



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.


21
2017-09-09 20:00