为什么我不能在部分和菜单上使用 margin-top 0？

Question

我想弄清楚为什么 margin top "0" 不起作用，正如您在代码中看到的那样，菜单和部分之间有一个白色的 space，我只能通过使用我不想使用的负值...有人可以帮我解决这个问题吗？

* {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
}
body {
    margin: auto;
    width: 50%;
}
header {
    background-image: url("medimare5.png");
    background-repeat: no-repeat;
    background-size: 318px 175px;
    width: 318px;
    height: 175px;
    margin-top: 10px;
}
menu {
    background-color: #70acdd;
    text-align: center;
    padding: 2%;
    border-radius: 2em 2em 0 0;
}
ul, li {
    display: inline;
    padding: 1%;
    font-weight: bold;
}
li:hover {
    border-bottom: 3px solid #FFF;
}
a {
    text-decoration: none;
    color: #FFF;
}
section {
    background-color: #70acdd;
    height: 100%;
    padding: 2%;
    margin-top: -1.7%;
    display: inline-block;
}
footer {
    background-color: #70acdd;
    padding: 2%;
    border-radius: 0 0 2em 2em;
}

<!DOCTYPE html>
<html>
<head>
<title>
Medimare
</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
</header>
<menu>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Consultas</a></li>
<li><a href="#">Conócenos</a></li>
<li><a href="#">Contacta</a></li>
</ul>
</menu>
<section>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</section>
<footer>
<p>Medimare 2020 © Todos los derechos reservados.</p>
</footer>
</body>
</html>

也许我应该开始使用 div？我不知道..

谢谢大家！

Answer 1

当您在 section 上设置 margin-top: 0 时出现的问题是 menu 有底部边距。如果您在 menu 上设置 margin-bottom: 0，它应该会像您预期的那样工作

Answer 2

我认为这不需要解释

menu {
    margin-bottom: 0;
}

为什么我不能在部分和菜单上使用 margin-top 0？

Why can't I use margin-top 0 on section and menu?

html

css

margins