7

Sé como solucionarlo, pero mi duda va en el por qué pasa esto. Tengo un section Padre y dentro un div Hijo. La cosa es que al colocar margin:20px en el hijo, Se le aplica un margin a todo, no solo al hijo que es donde yo quería aplicarlo respecto al padre. Porque se le aplica a todo? Se que se soluciona colocando un position: absolute al padre. Pero sin esto, porque se le aplica a todo mi contenido, padre e hijo. ¿Tiene alguna explicación?

body{
  margin: 0 auto;
  padding: 0;
}

#padre{
  width: 400px;
  height: 400px;
  background: orange;
}

#hijo  {
  width: 100px;
  height: 100px;
  background: green;
  margin:20px;
}
<body>

 <section id="padre">

  <div id="hijo" >1</div>

 </section>

</body>

1 respuesta 1

5

La explicación es que esto se llama "márgenes colapsadas".

Las márgenes verticales (superior -top- e inferior -bottom-) de los elementos bloque (block) se colapsan o combinan en ciertas ocasiones, y predomina la margen más grande, o alguna de ellas, en caso que sean iguales.

Esto ocurre en tres casos principalmente:

  • Hermanos adyacentes: Los márgenes de los hermanos adjacentes son colapsados (excepto cuando el último hermano necesita ser limpiado luego de los flotantes).
  • Padre y primer/último hijo: Si no hay un borde, padding, contenido en línea, o limpiado para separar el margin-top de un bloque del margin-top de su primer bloque hijo, o no hay borde, padding, contenido en línea, height, min-height, o max-height para separar el margin-bottom de un bloque del margin-bottom de su último hijo, entonces esos márgenes colapsan. El margen colapsado termina fuera del padre.
  • Bloques vacíos: Si no hay borde, padding, contenido en línea, height, o min-height para separar el margin-top de un bloque de su margin-bottom, entonces sus márgenes superiores e inferiores colapsan.

Como podemos ver, en el ejemplo que expones aplica el segundo caso "Padre y primer/útimo hijo". Apliqué un borde transparente de 1px para demostrar lo que dice la documentación: "Si no hay borde o ... que separe el margin-top padre del margin-top hijo, ...", entonces al agregar el borde, básicamente no se colapsan.

body{
  margin: 0 auto;
  padding: 0;
}

#padre{
  width: 400px;
  height: 400px;
  background: orange;
  border-top: solid 1px transparent;
}

#hijo  {
  width: 100px;
  height: 100px;
  background: green;
  margin:20px;
}
<section id="padre">

  <div id="hijo" >1</div>

 </section>


Referencias:

https://www.w3.org/TR/CSS2/box.html#collapsing-margins

https://www.w3.org/TR/CSS2/visuren.html#block-formatting

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.