如何删除页脚下方的空白 space？

Question

我根据找到的回答问题尝试消除白色space。但他们中没有一个是站在我这边的。

我试图删除 div 页脚中的填充，但白色 space 仍然存在。

如何解决这个问题？

CSS:

footer #bottom-footer{ background: url(/files/bg-testimonials.jpg) no-repeat; background-repeat: no-repeat; background-size: cover; box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.52); color: #000; text-align: left; padding: 50px 0 50px 0; font-size: 0.8125em; font-family: 'Open Sans', sans-serif; font-weight: 600; letter-spacing: normal; position: relative; left: 0; bottom: 0; height: auto; width: 100%; }
.footer-wrap a{ color: #000; }
.footer-wrap a:hover{ color: #d31716; }
.footer-logo a{ margin-bottom: 6px; display: block; }
.footer-socials{ float: none; line-height: 0; text-align: center; padding: 1em 0 2em;}
.footer-socials a{ border-radius: 100%; border: 3px solid #FFF; color: #FFF; display: inline-block; font-size: 1.25em; line-height: 2.50em; margin-left: 0.1em; text-align: center; vertical-align: middle; width: 2.50em; height: 2.50em; }
.footer-socials .social-icons span{ cursor: pointer; display: inline-block; }
.footer-socials .socials i{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; }
.tagcloud a{ font-size: 13px !important; background: rgba(0,0,0,0.4); padding: 8px 10px; margin: 0 2px 4px 0; display: inline-block;  line-height: 1; }
.sidebar .tagcloud a{ background: #23A38F; color: #FFF; }
.bottom-menu{ float: right; margin: 1em 4em 0 0; }
.bottom-menu ul{ list-style-type: none; font-size: 1.1125em; }
.bottom-menu ul li{ display: inline-block; font-family: 'Open Sans', sans-serif; font-weight: normal; line-height: 1.8; border-radius: 5px; border: 1px solid #CCC; box-shadow: 0 0 2px rgba(0,0,0,0.3); padding: 1em; margin: 0 0.10em 0 0; background: #FFF; color: #3e3e3e; }
.footerimg{ width:6em; }
.copyright{ margin: 2em 0 0 4em; }
.copyrighttext{ font-size: 1.08em; font-weight: 600; color: #B3B3B3; margin: 0 0 0 0.50em; }
#imgv ul{ list-style-type: none; letter-spacing: 1px; margin-top: -20px; font-size: 0.75em; }
#imgv ul li{ display: inline; }
.social-footer-mobile{ display: none; }
.footer-vertical-line{ border-top: 1px solid #8c8b8b;width: 9em; vertical-align: middle; position: relative; }
.left{ left: 32.50em; top: 1.65em; }
.right{ right: 32.50em; top: -1.45em; float: right; }

HTML:

<div id="bottom-footer" class="footer-menu">
    <div class="ak-container">
    <div class="footer-wrap clearfix">
        <div class="footer-socials clearfix">
        <div class="footer-vertical-line left"></div>
            <div class="socials">
        <a href="#" class="facebook" title="Facebook" target="_blank"><span class="font-icon-social-facebook"></span></a>
        <a href="#" class="twitter" title="Twitter" target="_blank"><span class="font-icon-social-twitter"></span></a>
        <a href="#" class="youtube" title="Youtube" target="_blank"><span class="font-icon-social-youtube"></span></a>
        <a href="" class="linkedin" title="Linkedin" target="_blank"><span class="font-icon-social-linkedin"></span></a>
        </div>
                <div class="footer-vertical-line right"></div>
        </div>

        <div class="footer-columns-4">
            <ul>
                <li>Products</li>
                <li><a href="#" title="All Products">All products</a></li>
                <li><a href="#" title="Standard loan">Standard loan</a></li>
                <li><a href="#" title="Promo loans">Promo loans</a></li>
                <li><a href="#" title="Promo loans">Insurance for loans</a></li>
            </ul>
            <ul>
                <li>About Loans</li>
                <li><a href="#" title="How to apply">How to apply</a></li>
                <li><a href="#" title="Our partner stores">Our partner stores</a></li>
                <li><a href="#" title="Terms &amp; Conditions">Terms &amp; Conditions</a></li>
                <li><a href="#" title="Safety guarantee">Safety guarantee</a></li>
            </ul>
            <ul>
                <li>For Customers</li>
                <li><a href="#" title="Financial literacy">Financial literacy</a></li>
                <li><a href="#" title="Payments &amp; Guidelines">Payments &amp; Guidelines</a></li>
                <li><a href="#" title="Menu">Menu</a></li>
                <li><a href="#" title="FAQ">FAQ</a></li>
            </ul>
            <ul>
                <li>Title</li>
                <li><a href="#" title="About us">About us</a></li>
                <li><a href="#" title="News">News</a></li>
                <li><a href="#" title="Careers">Careers</a></li>
                <li><a href="#" title="Contacts">Contacts</a></li>
            </ul>
        </div>

        <nav role="navigation">
        <div class="bottom-menu">
            <ul class="footer-desktop-version">
                <li><span class="footer-icon-cs icon-icon-support"></span>Customer Service: <strong>11111111</strong></li>
            <li><span class="footer-icon-cs icon-icon-collection"></span>Collections <strong>1111111</strong></li>
            </ul>
        </div>
        </nav>

        <div class="copyright">
        <img src="/files/footer.jpg" class="footerimg"><span class="copyrighttext"> All Rights Reserved ® 2017 
            Company Name</span>
        </div><!-- .copyright -->
    </div><!-- .footer-wrap -->
                    </div>
        </div>

Answer 1

首先您必须右键单击页脚并单击检查
然后您将看到所有 css 应用于该特定元素，select 父元素
检查底部填充是否应用于正文或页脚元素
如果您没有找到页脚或正文元素或页脚的其他父元素 class 的底部填充，请指定负数的底部填充。 (例如-5px)

注意：您不需要为了测试目的而直接修改css您可以在调试工具本身中更改并检查效果（调试工具的 f12 快捷方式）

它应该是这样的： (元素名称) { padding-bottom:-30px); }

如果填充不起作用，还要检查下边距。

Answer 2

你的代码没有显示任何内容，也许你不会透露你的网址没问题。您需要检查 html 中的任何内容 div 或内容区域是否具有 minus 值，例如 top:-100px 如果您设置了类似的内容，则需要更改 margin-top:-100px

如何删除页脚下方的空白 space？

How to remove blank white space below footer?

html

css

footer

removing-whitespace