网站边缘和页脚之间的空间

时间:2016-11-23 22:04:03

标签: html css layout positioning

我似乎无法删除页脚和网站之间的这个小空间。如果屏幕已调整为小于宽度,则仅显示空间:500px;。

http://imgur.com/a/mNhgN

<footer class="footer">
            <div class="left-side">
                <div>
                    <a href="#">Back to top</a>
                </div>
                <p>Loo Inc &copy; 2016</p>
            </div>
            <div class="middle">
                <div>
                    <h3>Social Media</h3>
                    <img src="images/icons/facebook.png" alt="facebook social media icon"> <a href="https://www.facebook.com/TheLooApp/" target="_blank" alt="link to our facebook profile.">facebook.com </a> <br/>
                    <img src="images/icons/twitter.png" alt="twitter social media icon"> <a href="https://www.twitter.com/TheLooApp" target="_blank" alt="Link to our twitter profile.">twitter.com</a> <br/>
                    <img src="images/icons/instagram.png" alt="instagram social media icon"> <a href="https://www.instagram.com/TheLooApp" target="_blank" alt="Link to our instagram profile.">instagram.com </a> <br/>
                </div>
                <div style="margin-top:20px;">
                    <p>E-mail us at: <a href="mailto:support@company.com">loo@mail.com</a></p>
                </div>
            </div>
            <div class="right-side">
                <p class="our_services">
                    <h3> Payment methods </h3>
                    <img src="images/icons/mc.png" alt="Icon with MasterCard logo. ">
                    <img src="images/icons/visa.png" alt="Icon with Visa logo.">
                    <img src="images/icons/paypal.png" alt="Icon with PayPal logo.">
                    <img src="images/icons/vipps.png" alt="Icon with Vipps logo.">
                </p>
            </div>
        </footer>

https://jsfiddle.net/4hxe30er/

1 个答案:

答案 0 :(得分:2)

使用html结构的一小部分调试代码很困难,但是,从JSFiddle中,您应该能够通过删除margin-bottom: 40px;内的@media (max-width: 50em) { }行来修复这一差距。