我遇到一个奇怪的问题,在我的页脚和页面底部之间有48px的非边距/填充(我还注意到如果我从DOM中删除页脚) ,空间仍然在下一个元素下面。)
当我将背景颜色应用到body
(图中的黄色)时,我才注意到它。我还使用了规范化样式表,并尝试强制页脚上的margin-bottom
无效。
基本结构:
<footer>
<section>
</section>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</footer>
相关CSS:
* {
box-sizing: border-box;
outline: none;
}
html {
font-size: 16px;
}
body {
width: 100%;
background-color: #fefde1;
line-height: 1.5;
color: #656565;
position: relative;
}
footer {
margin-bottom: 0 !important;
padding-bottom: 60px;
width: 100%;
background-color: #fff;
font-size: 1rem;
}
答案 0 :(得分:0)
我只能想到三件事:
1:身体有一个你没有注意到的边缘或填充物。
2:身体里面有一些边缘或边框。
3:添加“margin-bottom:-48px;”在页脚中。 (这很快又很脏)
答案 1 :(得分:0)
如果它可以帮助其他任何人,问题就是跟踪像素脚本,尽管height
为0
,但却为DOM添加了空间。
答案 2 :(得分:-1)
也许你应该添加一些重置样式。检查导航器检查器并选择这些属性,默认情况下会看到一些“继承样式”。
尝试将此添加到您的体型:
body {
margin: 0;
padding: 0;
box-sizing: border-box
}