如何调整我的 div 的头寸而不会使边距崩溃？

Question

我的 header 里面有一个 div。我想要做的就是稍微向下移动它，我已经通过更改 div 的 'margin-top' 值轻松地实现了这一点。但是，我不喜欢这种方法的是，由于边距折叠，我的 body 不会从页面顶部开始。似乎正在发生的是 div 的保证金 "leaves" header，然后 header 的获得保证金再次 "leaves"，最后在body.

下面是所发生情况的可视化（请注意每个屏幕截图下方的描述）：https://imgur.com/a/uxpfaPl

对于我正在尝试做的事情是否有任何替代方案，或者我是否应该不被 body 获得的偏移量所困扰？

[更新] 我已经尝试使用 padding-top 代替，这解决了 body 问题，但是它与我的 div 正在做的事情冲突（见屏幕截图link).

中的填充问题

这是所有相关代码， 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%;
}

Answer 1

您可以在容器 (1px) 上使用微小的 padding-top，然后 child 的边距将保留在容器内：

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>

Answer 2

如何使用 padding-top 并将隐藏溢出添加到您的 header？

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

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

如何调整我的 div 的头寸而不会使边距崩溃？

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

html

css

margin