CSS页脚有巨大的margin-top，需要删除答案

【问题标题】：CSS footer has huge margin-top, need to removeCSS页脚有巨大的margin-top，需要删除
【发布时间】：2019-08-11 15:16:28
【问题描述】：

我正在使用一个模板（基本上是同一个页面用同一个模板重复），但是，在我的三个页面上有一个巨大的 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;
}

【问题讨论】：

在 !important style="margin-top:30px !important" 之前不需要分号
感谢您的提示。但是，它对我没有帮助；-(
删除页脚元素上的类，然后添加单独的类。
可能是一些javascript。
其实你的内联代码无论如何都可能被js替换。您可以通过 css 尝试，您可以尝试将此 CSS 添加到 dark.css 文件中的其他位置：#footer { margin-top:30px !important; }。同样在你的 dark.css 中有 position: fixed 和 bottom:0;所以页脚将被设置在窗口屏幕的底部。

标签： html css bootstrap-4

【解决方案1】：

它与您添加的 margin 不完全一致，以便在底部制作页脚 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;
}

【讨论】：