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