in

Cuando usar margen vs relleno en CSS

apple touch icon@2

TL; DR: De forma predeterminada, uso márgenes 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 con un 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, seguido del contenido del segundo elemento.

Así, el contenido de los dos elementos acabará siendo 2em aparte.

Ahora reemplace ese relleno con un margen de 1em. 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. Entonces, el contenido de los dos elementos es solo 1em aparte.

Esto puede resultar muy útil cuando sabes que quieres decir 1em de espaciado alrededor de un elemento, independientemente del elemento al lado.

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

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>

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Función de biblioteca C – memcpy ()

gfg 200x200 min

¿Cómo crear una matriz de objetos en Java?