Question

我的标题中有一个div。我要做的就是将其稍微向下移动，而我很容易通过更改div的“ margin-top”值来实现这一目标。但是，我对这种方法不满意的是，由于页边距缩小，导致我的身体无法从页面顶部开始。似乎正在发生的事情是div的页边距“离开”了页眉，然后页眉的获取的页边距再次“脱离了”，并最终出现在正文中。

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

我想做的事情是否有其他选择，还是我不应该被身体得到的偏移所困扰？

[UPDATE]我已经尝试过使用padding-top来解决主体问题，但是它与我的div正在执行的操作发生冲突（请参阅链接中有关padding问题的屏幕截图）。

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

您可以在容器上使用一个微小的padding-top（1像素），然后孩子的边缘将保留在容器内：

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 {
    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的位置？

2 个答案: