我正在尝试将页脚下移50像素以退出屏幕，
但是负边距不起作用（什么都没动），我不太确定为什么...
footer {
background: #111;
padding: 50px 0 100px;
text-align: center;
margin-bottom: -50px;
}
这是一个例子
body {
background: white;
margin: 0;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -50px;
}<body>
<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>
</body>最佳答案
负利润状况很好，但没有达到您的期望。负底边不会使元素向外移动。它将使父元素缩小。
这是一个简单的例子：
.box {
border:5px solid #000;
}
.box div{
background:red;
height:200px;
margin-bottom:-50px;
}<div class="box">
<div></div>
</div>如您所见，由于负边距，父元素的高度小于其子元素的高度，并且我们发生了溢出。
这就是您所发生的情况，并且由于默认情况下是溢出，因此您将继续看到页脚。添加一些边框，您会更好地看到：
body {
background: white;
margin: 0;
border:2px solid;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -50px;
}<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>为了隐藏溢出部分，只需调整overflow属性，您将拥有所需的内容：
html {
overflow:auto;
}
body {
background: white;
margin: 0;
border:2px solid;
overflow:hidden;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -200px;
}<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>如您所见，我添加了更大的负边距以缩小body元素并使所有页脚向外，然后使用
overflow:hidden将其隐藏