【问题标题】:How to eliminate white space between divs如何消除div之间的空白
【发布时间】:2021-05-26 02:22:37
【问题描述】:

我正在为一个学校项目开发一个网站,但我遇到了问题,因为我的两个 div 之间出现了一个空白。

我想删除它,但我不知道该怎么做... 如果有人可以帮助我,我会很高兴,因为我尝试了各种方式! 提前致谢,如果您需要更多信息或代码无法理解,请询问我 :)

.imghome{
    max-width: 100%;
    background-image:linear-gradient(268.06deg, rgba(0, 0, 0, 0) 16.53%, rgba(235, 235, 235, 0.110625) 57.07%, rgba(245, 248, 250, 0.13) 60.5%), url(thumb-1920-671540.jpg);
}

.homebutton{
    font-family: Lato;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #F5F8FA;
    height: 70px;
    width: 315px;
    z-index:10;
    border-radius: 0px;

    background: #BD1B1D;
    border-radius: 10px;
    position: absolute;
    left: 41.17%;
    right: 38.96%;
    top: 77.62%;
    bottom: 32.21%;

}


div.container{
    position: relative;
    text-align: center;
    overflow:auto;
    clear:none;
    padding:0;
    margin:0;
}

h1.filmtitle{
    padding-top: 3%;
    position: absolute;
    width: 45%;
    height: 20%;
    left: 2%;
    top: 20%;

    font-family: Nunito Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 5.5vw;
    line-height: 142px;
    /* identical to box height */

    letter-spacing: -0.02em;
}
p.filmsinoxis{
    padding: 4%;
    position: absolute;
    width: 40%;
    left: 2%;
    top: 38%;
    text-align:left;
    font-family: Lato;
    font-style: normal;
    font-weight: normal;
    font-size: 1.5vw;
    line-height: 150%;
    color: #000000;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.55);

}

.footer{
    background-color: #BD1B1D;
    padding-bottom:2%;
    clear:both;
    margin: 0;
    overflow: auto
}
<div class="container">
    <img class="imghome" src="Immagini/thumb-1920-671540.jpg" alt="sfondo home">
    <h1 class="filmtitle">The Hateful Eight</h1>
    <p class="filmsinoxis">Qualche anno dopo la fine della guerra civile, una diligenza è costretta a fermarsi nel cuore del Wyoming a causa di una tempesta di neve.<br> Il cacciatore di taglie John Ruth e la propria prigioniera Daisy Domergue sono attesi nella città di Red Rock.</p>
    <form style="display: inline" action="Il_Film.html" method="get"> <button class="homebutton">Scopri il film</button></form>
</div>

<div class="footer">
    <div class="container-social">
        <a class ="link-icons" href="https://www.imdb.com/title/tt3460252/"><img class="social-icon" src="Icone/kisspng-computer-icons-imdb-imdb-5b3f4533539f881.svg" alt="icona IMDB"></a>
        <a class="link-icons" href="https://www.facebook.com/TheHatefulEight.ilfilm"><img class="social-icon" src="Icone/Facebook.svg" alt="icona facebook"></a>
        <a class="link-icons" href="https://twitter.com/thehatefuleight"><img class="social-icon" src="Icone/Twitter.svg" alt="Icona twitter"></a>
        <a class="lnk-icons" href="https://www.instagram.com/thehatefuleightmovie/?hl=it"> <img class="social-icon" src="Icone/Instagram.svg" alt="icona instagram"></a>
    </div>
    <hr style="width:50%; margin:auto; border-color:#000000;">
    <div class ="IMDBactors">
        <p class="Copyright-Line">Copyright Andrea Velletta</p>
        <ul class="LinkActorSx">
            <li class="ActorSx"> <a class="LinkImdb" href="https://www.imdb.com/name/nm0000514/"><img class="imgfoot"    src="Icone/LinkAttore1.png" alt="Icona attore"></a>  </li>
            <li class="ActorSx"> <a class="LinkImdb" href="https://www.imdb.com/name/nm0001136/"><img class="imgfoot"    src="Icone/LinkAttore2.png" alt="Icona attore"></a></li>
            <li class="ActorSx"> <a class="LinkImdb" href="https://www.imdb.com/name/nm0000168/"><img class="imgfoot"    src="Icone/LinkAttore3.png" alt="Icona attore"></a> </li>
            <li class="ActorSx"> <a class="LinkImdb" href="https://www.imdb.com/name/nm0000621/"><img class="imgfoot"    src="Icone/LinkAttore4.png" alt="Icona attore"></a> </li>

            <li class="ActorDx"> <a class="LinkImdb" href="https://www.imdb.com/name/nm0000619/"><img class="imgfoot" src="Icone/LinkAttore5.png" alt="Icona attore"></a> </li>
            <li class="ActorDx"> <a class="LinkImdb" href="https://www.imdb.com/name/nm0000492/"><img class="imgfoot" src="Icone/LinkAttore6.png" alt="Icona attore"></a> </li>
            <li class="ActorDx"> <a class="LinkImdb" href="https://www.imdb.com/name/nm1475594/"><img class="imgfoot" src="Icone/LinkAttore7.png" alt="Icona attore"></a> </li>
            <li class="ActorDx"> <a class="LinkImdb" href="https://www.imdb.com/name/nm0324658/"><img class="imgfoot" src="Icone/LinkAttore8.png" alt="Icona attore"></a> </li>
        </ul>
    </div>

</div>

【问题讨论】:

  • 欢迎来到 Stack Overflow!绝对定位是一种非常糟糕的网页布局方法。它非常不灵活,并且有更好和响应速度更快的选项。查看LearnLayout.com

标签: html css border whitespace margin


【解决方案1】:
*{ margin: 0; padding: 0;}

我认为这是因为浏览器应用了默认边距简单地将代码放在样式表文件的顶部并查看结果希望,它会解决您的问题

【讨论】: