Margin-top w relacji rodzic- dziecko

     .box{
         width: 300px;
         height: 500px;
         background-color: lime;
             
     }
     .insidebox{
         margin-top: 100px;
         width: 200px;
         height: 100px;
         background-color: blue;
     }
    
 </style>
  <div class="box">
      <div class="insidebox"></div>
  </div>

Witam, czy mógłby ktoś wytłumaczyć w skrócie czemu, zawsze pierwszy potomek rodzica, który ma jakąś wartość margin-top, tak wpływa na rodzica( chodzi o przesunięcie obydwóch divów), natomiast gdy rodzicowi doda się np.: border czy też padding, margin-top już "zachowuje się normalnie"? Wiem że są różne sposoby na to by tylko pierwszy potomek się przesunął,ale interesuje mnie czemu tak się dzieje?
Pozdrawiam

W skrócie, marginesy rodzica się zawijają (dostosowują) do zawartości :) To normalne zachowanie i tak jak piszesz, jest wiele sposobów by sobie z tym radzić.
Więcej możesz o tym przeczytać tu: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing