How to adjust my div's position without collapsing margins?

I have a div inside my header. All I want to do is move it slightly downwards, and I've easily managed to achieve that by changing the div's 'margin-top' value. However, what I dislike about this method is that due to margins collapsing my body doesn't start at the top of the page. What seems to be happening is the div's margin "leaves" the header, and then the header's acquired margin "leaves" again, and ends up in the body.

Here's a visualization of what happens (note the descriptions under each screenshot): https://i.sstatic.net/xGYDU.jpg

Are there any alternatives to what I'm trying to do, or should I just not be bothered by the offset that the body is getting?

[UPDATE] I've already tried using padding-top instead, and that solves the body issue, however it conflicts with what my div is doing (see screenshot of the padding issue in the link).

Here's all the relevant code, HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Home - Randoragon GameDev</title>
        <link rel="stylesheet" type="text/css" href="./css/styles.css">
    </head>
    <body>
        <div id="global_container">
            <header>
                <div id="header_banner">
                    <img src="./img/header.png" alt="Header Banner"/>
                    <div class="overlay"></div>
                </div>
                <div class="header_image">
                    <img src="./img/randoragon_logo.png" alt="Randoragon Logo"/>
                    <a href="./index.html"><div class="overlay"></div></a>
                </div>
                <h3><a href="./index.html">RANDORAGON GAMEDEV</a></h3>
            </header>
        </div>
    </body>
</html>

CSS:

html {
    width:  100%;
    height: 100%;
}

body {
    margin: 0px 0px 0px 0px;
    background-color: #202125;
}

header {
    margin: 0px 0px 0px 0px;
    text-align: center;
}


.header_image {
    margin: auto;
    margin-top: 26px;  /* <- THIS IS THE MENTIONED MARGIN */
    margin-bottom: 0px;
    width: 100px;
    height: 100px;
    overflow: hidden; 
    border-radius: 50%;
}

Solution

You can use a tiny padding-top on the container (1px), then the margin of the child will remain within the container:

html,
body {
  margin: 0;
}

.x {
  background: red;
  height: 200px;
  padding-top: 1px;
  box-sizing: border-box
}

.y {
  background: green;
  height: 100px;
  margin-top: 30px;
}

<div class="x">
  <div class="y">
  </div>
</div>