Question

刚刚在网站上实施了谷歌地图，但地图和页脚之间的差距可能只有1-2px。我想知道是否有任何方法让他们坐在一起，没有一个小差距。感谢您的帮助或建议。不知道我怎么能解决这个问题！

地图和页脚html

<iframe id="maps"
  width="100%"
  height="300px"
  padding="0px"
  margin="0px"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=AIzaSyB0d_sYwCWD5owhYY4UYb-i7VlOOnx2_o4

    &q=The Beckwood,Scunthorpe" allowfullscreen>
</iframe>

<footer id="myFooter">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
                    <img id="footerlogo" src="assets/img/logo.png">

                </div>
                <div class="col-sm-4">
                    <h5>Thank you</h5>

                        <p>We would like to thank you for taking the time and visiting thebeckwood.co.uk. If you have any queries please don't hesitate to use the contact us button or give us a quick phone call.</p>
                         <img class="center" src="assets/img/hygeine.png">

                </div>
                <div class="col-sm-1">
                    <h5>Navigation</h5>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="menu.html">Menu</a></li>
                        <li><a href="gallery.html">Gallery</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="book.html">Book</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div>

                <div class="col-sm-4">
                    <div class="social-networks">
                        <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
                        <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
                        <a href="#" class="google"><i class="fa fa-instagram"></i></a>
                    </div>
                    <button type="button" class="btn btn-default"> <a href="contact.html"> Contact us </a></button>


                </div>

            </div>
        </div>
        <div class="footer-copyright">
            <p>© 2018 The Beckwood.</p>
        </div>
    </footer>

页脚CSS

#footerlogo {
    height:90px;
    margin-top: 20px;
}
#myFooter {
    background-color: #3d280c;
    color: white;
    padding-top: 30px

}

#myFooter .footer-copyright {
    background-color: #35240a;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
}

#myFooter .row {
    margin-bottom: 30px;
}

#myFooter .navbar-brand {
    margin-top: 45px;
    height: 65px;
}

#myfooter .navbar-brand>img {
  height: 50px;
  width: auto;
}

#myFooter .footer-copyright p {
    margin: 10px;
    color: #ccc;
}

#myFooter ul {
    list-style-type: none;
    padding-left: 0;
    line-height: 1.7;
}

#myFooter h5 {
    font-size: 25px;
    margin-top: 30px;
    color: #FFB03B;;
    font-family: 'Satisfy', cursive;
}

#myFooter h2 a{
    font-size: 50px;
    text-align: center;
    color: #fff;
}

#myFooter a {
    color: #d2d1d1;
    text-decoration: none;
}

#myFooter a:hover,
#myFooter a:focus {
    text-decoration: none;
    color: #FFB03B;
}

#myFooter .social-networks {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 16px;
}

#myFooter .social-networks a {
    font-size: 32px;
    color: #f9f9f9;
    padding: 10px;
    transition: 0.2s;
}

#myFooter .social-networks a:hover {
    text-decoration: none;
}

#myFooter .facebook:hover {
    color: #002659;
}

#myFooter .google:hover {
    color: #ef1a1a;
}

#myFooter .twitter:hover {
    color: #00aced;
}

#myFooter .btn {
    color: white;
    background-color: #c48529;
    border-radius: 20px;
    border: none;
    width: 150px;
    display: block;
    margin: 0 auto;
    margin-top: 10px;
    line-height: 25px;
}

#myFooter .btn:hover {
    color: #593c12;
}

Answer 1

添加

<style>iframe { display:block; } </style>

或

#maps {
    display: block;
}

在你的情况下。

iframe的默认显示属性是内联的。这意味着它们将被放置在文本基线上。您看到的差距是文本行中字母字母的空间。因此，它与Google地图无关。

Answer 2

可能有一些或多个原因，例如填充和边距设置在其他地方。

您可以通过将margin-top设置为否定来将页脚向上移动一点。

尽管如此，请尝试添加：

#myFooter {
    background-color: #3d280c;
    color: white;
    padding-top: 30px;
    margin-top: -5px;
}

谷歌地图和页脚之间的小差距

2 个答案: