为什么 margin-top 从网站顶部开始计算，而不是上面的元素？

Question

我想我遗漏了一个非常重要的 css 规则，以确保当我使用 margin-top 时，图像下方的页脚和 H1 元素之类的东西不会识别图像并从那里开始使用 margin-top。

示例：我必须使用 margin-top: 50px;获取图像下方的 H1 元素，否则文本将显示在图像上而不是下方。

现在使用 h1 {MARGIN-TOP: 50px;} 时它是如何工作的：

main {
    margin: 0 auto;
    width: 960px;
}

body {
    margin: 0;

}

/*navigation*/

#navigation {
    font-family: 'Aller Display';
    color: black;

}

#logo {
    float: left;
    width: 229px;
    height: 100px;
    margin-left: 52px;
    margin-top: 0;
    clear: both;

}

#mobilemenu {
    display: none;
}

#navigation_list {
    float: right;
    overflow: hidden;
    }

#navigation_list li {

    display: inline-block;

}

#navigation_list li a {
    margin-top: 0;
    line-height: 75px;
    margin-right: 10px;
    font-size: 24px;

}

#navigation_list li a:hover {

    color: #f07c00;

}

#rightnav {
    margin-right: 22px;
}

/*overzicht gerechten*/
h1.overzichtger {

    font-family: 'Aller Bold';
    margin-left: 150px;
    font-size: 28px;
    margin-top: 50px;


}

div.centerimg {

    text-align: center;

}

img.imgoverzichtgerechtlinks {
    float: left;
    width: 470px;
    height: 176px;
    overflow: hidden;

}

img.imgoverzichtgerechtrechts {

    float: right;
    width: 470px;
    height: 176px;
    overflow: hidden;


}


/*footer*/

footer {

    font-family: 'Aller Bold';
    margin-top: 15px;
    font-size: 21px;
    height: 55px;
    background-color: #f07c00;
    color: black;
    line-height: 55px;
    width: 100%;
}

#test {
    float: right;
    display: inline-block;

<main>

    <nav id="navigation">
        <img src="logo.jpg" id="logo">
        <a id="mobilemenu" class="menu_button" href="#footer_nav" onclick="toggleNav(); return false;">&#9776;  MENU</a>
        <ul id="navigation_list" role="navigation">
            <li><a href=#>Nieuws</a></li>
            <li><a href=#>Info</a></li>
            <li><a href=#>Bezienswaardigheden</a></li>
            <li><a href=#>Keuken</a></li>
            <li id="rightnav"><a href=#>Steden</a></li>
        </ul>
    </nav>

        <br> <br>



        <img src="geroverzicht1.jpg" class="imgoverzichtgerechtlinks">
        <img src="geroverzicht2.jpg" class="imgoverzichtgerechtrechts">
        <br><br>
        <div class="test">
        <h1 class="overzichtger">Pepernoten</h1>
            </div>



    <footer>
        <div id="test">
        </div>
    </footer>


</main>

不知道该怎么办了，我一直在检查关于同一问题的 Whosebug 上的其他主题，并且我添加了溢出：隐藏到两张图片中，因为它们是浮动的。

Answer 1

发生这种情况是因为您将两个图像浮动在 h1 上方。当你浮动一个元素时，它是"taken out of the document flow"，并告诉渲染引擎显示后续元素"next to it"。

所以发生的是你的 <div class="test">（包含 h1 的那个）试图靠近你浮动的两个图像。

可能的解决方案：

将 <div class="test"> 设置为 clear:both，这基本上是指示浏览器不要在其旁边添加任何内容，无论前面的浮动元素说什么。
不要使用浮动。将您的图像设置为 display: inline-block，这似乎是您想要做的。不要忘记也设置 vertical-align 。这就是发明 display:inline-block 的部分原因 - 浮动布局可能令人困惑且难以管理。

此外，请尽量不要在代码中使用 <br> 来创建 space。另请注意，并非所有浏览器都支持 <main> 标签。

为什么 margin-top 从网站顶部开始计算，而不是上面的元素？

Why is margin-top counting from the top of the website and not the element above?

html

css

css-float

margin