CSS页脚有巨大的上边距，需要删除

Question

我正在使用一个模板（基本上是使用相同模板重复的相同页面），但是，在我的三个页面上有一个巨大的margin-top元素，我不知道如何删除它。

我尝试添加一个style =“margin-top：30px”，我尝试添加style =“margin-top：30px;！important”，看看我是否能够超越这个，但无济于事。

看看Chrome中的检查工具，我可以看到margin-top的值为698px，我只是无法弄清楚如何制作它以便它绝对不是那么大...最多30个。

<footer id="footer" class="dark" style="margin-top: 698px;">

页脚的html是

<footer id="footer" class="dark">
<div class="container">


<div id="copyrights">
<div class="container clearfix">
<div class="col_half">
Copyrights &copy; 2013-2019<br>Daniël E. Cronk<br>

</div>
<div class="col_half col_last tright">
<div class="fright clearfix">
<a href="#" class="social-icon si-small si-borderless si-facebook">
<i class="icon-facebook"></i>
<i class="icon-facebook"></i>
</a>
<a href="https://www.twitter.com/dereizigercronk" class="social-icon si-small si-borderless si-twitter">
<i class="icon-twitter"></i>
<i class="icon-twitter"></i>
</a>
<a href="https://www.instagram.com/a333msptoams" target="_blank" class="social-icon si-small si-borderless si-instagram">
<i class="icon-instagram"></i>
<i class="icon-instagram"></i>
</a>
</div>
<div class="clear"></div>

</div>
</div>
</div>
</div>
</footer>

据我所知，CSS的层次结构显示页脚具有以下CSS元素：

bootstrap.css

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

style.css文件

#footer {
position: relative;
background-color: #EEE;
border-top: 5px solid rgba(0,0,0,0.2);
bottom: 0;
}

.device-xl.sticky-footer #top-bar,
.device-lg.sticky-footer #top-bar { z-index: 299; }

.device-xl.sticky-footer #header,
.device-lg.sticky-footer #header { z-index: 199; }

.device-xl.sticky-footer #slider:not(.slider-parallax-invisible),
.device-xl.sticky-footer #page-submenu,
.device-xl.sticky-footer #page-title,
.device-xl.sticky-footer #content,
.device-lg.sticky-footer #slider:not(.slider-parallax-invisible),
.device-lg.sticky-footer #page-submenu,
.device-lg.sticky-footer #page-title,
.device-lg.sticky-footer #content { z-index: 2; }

.device-xl.sticky-footer #footer,
.device-lg.sticky-footer #footer {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.device-xl.sticky-footer:not(.stretched) #footer,
.device-lg.sticky-footer:not(.stretched) #footer {
    left: 50%;
    margin-left: -610px;
    width: 1220px;
}

.device-lg.sticky-footer:not(.stretched) #footer {
    margin-left: -500px;
    width: 1000px;
}

#footer .footer-widgets-wrap {
    position: relative;
    padding: 80px 0;
}

.footer-widgets-wrap .col_full,
.footer-widgets-wrap .col_half,
.footer-widgets-wrap .col_one_third,
.footer-widgets-wrap .col_two_third,
.footer-widgets-wrap .col_three_fourth,
.footer-widgets-wrap .col_one_fourth,
.footer-widgets-wrap .col_one_fifth,
.footer-widgets-wrap .col_two_fifth,
.footer-widgets-wrap .col_three_fifth,
.footer-widgets-wrap .col_four_fifth,
.footer-widgets-wrap .col_one_sixth,
.footer-widgets-wrap .col_five_sixth { margin-bottom: 0; }

#copyrights {
    padding: 40px 0;
    background-color: #DDD;
    font-size: 14px;
    line-height: 1.8;
}

#copyrights i.footer-icon {
    position: relative;
    top: 1px;
    font-size: 14px;
    width: 14px;
    text-align: center;
    margin-right: 3px;
}

.copyright-links a {
    display: inline-block;
    margin: 0 3px;
    color: #333;
    border-bottom: 1px dotted #444;
}

.copyright-links a:hover {
    color: #555;
    border-bottom: 1px solid #666;
}

.copyrights-menu { margin-bottom: 10px; }

.copyrights-menu a {
    font-size: 14px;
    margin: 0 10px;
    border-bottom: 0 !important;
}

#copyrights .col_half { margin-bottom: 0 !important; }

#copyrights a:first-child { margin-left: 0; }

#copyrights .tright a:last-child { margin-right: 0; }

.footer-logo {
    display: block;
    margin-bottom: 30px;
}

dark.css

#footer.dark,
.dark #footer {
    background-color: #333;
    color: #CCC;
    border-top-color: rgba(0,0,0,0.2);
    margin-top: 30px;
    display: inline-block;
    position: fixed;
bottom: 0;
}

Answer 1

它不是特别的margin你添加了css在底部制作页脚fixed，所以它的显示边缘高于（屏幕高度）。

#footer.dark,
.dark #footer {
    background-color: #333;
    color: #CCC;
    border-top-color: rgba(0,0,0,0.2);
    margin-top: 30px;
    display: inline-block;
    position: fixed;
    bottom: 0;
}