¿Cuál es la diferencia entre margen y relleno en CSS?
¿ Cuál es la diferencia entre marginy paddingen CSS? ¿Cuándo se debe utilizar uno u otro?
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 un relleno de 1em. Este relleno se considera parte del elemento y siempre se conserva.
Terminará con el contenido del primer elemento, seguido del relleno del primer elemento, seguido del relleno del segundo, seguido del contenido del segundo elemento.
Así el contenido de los dos elementos acabará estando 2emseparado.
Ahora reemplace ese relleno con 1emmargen. Se considera que los márgenes están fuera del elemento y los márgenes de los elementos adyacentes se superpondrán.
En este segundo ejemplo, terminará con el contenido del primer elemento seguido 1emdel margen combinado seguido del contenido del segundo elemento. De modo que el contenido de los dos elementos es sólo 1emaparte.
Esto puede ser realmente útil cuando sabes lo que quieres decir 1emsobre el espacio alrededor de un elemento, independientemente del elemento al lado del cual esté.
La otra gran diferencia es que el relleno se incluye en la región de clic y el color/imagen de fondo, pero el margen no.
div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }<h3>Default</h3>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h3>padding-top: 20px</h3>
<div class="box padding">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h3>margin-top: 20px; </h3>
<div class="box margin">
<div>A</div>
<div>B</div>
<div>C</div>
</div>Por defecto uso margen en todas partes, excepto cuando tengo un borde o fondo y quiero aumentar el espacio dentro de ese cuadro visible.
El margen está en el exterior de los elementos del bloque, mientras que el relleno está en el interior.
- Utilice el margen para separar el bloque de las cosas que están fuera de él.
- Utilice relleno para alejar el contenido de los bordes del bloque.
Lo mejor que he visto explicando esto con ejemplos, diagramas e incluso una vista de "pruébelo usted mismo" está aquí .
Creo que el diagrama a continuación brinda 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 ) muestran solo la parte del contenido con el ancho determinado, así que realice un seguimiento de esto en los cálculos de diseño. También tenga en cuenta que el cuadro de borde está experimentando una especie de regreso con Bootstrap 3 como soporte.
Hay explicaciones más técnicas para su pregunta, pero si desea pensar en el margen y el relleno, esta analogía podría resultar útil.
Imagine elementos de bloque como marcos de cuadros colgados en una pared:
- La foto es el contenido .
- La estera es el acolchado .
- La moldura del marco es el borde .
- La pared es la ventana gráfica .
- El espacio entre dos fotogramas es el margen .
Teniendo esto en cuenta, una buena regla general es utilizar margen cuando desee espaciar un elemento en relación con otros elementos en la pared y relleno cuando ajuste la apariencia del elemento en sí. El margen no cambiará el tamaño del elemento, pero el relleno hará que el elemento sea más grande 1 .
1 Puede modificar este comportamiento con el box-sizingatributo .
