I know how to fix it, but my question is why this happens. I have a Parent section and inside a Child div. The thing is that when placing margin: 20px in the child, a margin is applied to everything, not only the child, which is where I wanted to apply it with respect to the parent. Why does it apply to everything? I know that it is solved by placing a position: absolute to the parent. But without this, because it applies to all my content, parent and child. Do you have any explanation?
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>