删除网页下方的空间

Question

I am trying to remove this little space I get below my entire webpage. 我正在尝试删除整个网页下方的小空间。 Below will be my css page and my html page. 以下是我的CSS页面和HTML页面。 It showed up some time between moving my css from local to a stylesheet. 它在将CSS从本地移动到样式表之间显示了一段时间。 Not sure what it could be. 不知道会是什么。 Any ideas would be greatly appreciated! 任何想法将不胜感激！ Thank you! 谢谢！

HTML: HTML：

<html
    <head>
        <link rel="icon" href="Pictures/BluBeatsLogo2.png"> <!-- Icon in browser tab -->
        <link rel="stylesheet" type="text/css" href="styling.css"><!-- Stylesheet Import -->

        <style>            
            .music{
                padding-top:130px;
                text-align: center;
            }

            .music h1{
            font-size:64px;
            color:rgba(75,75);
            text-shadow: -3px 3px rgb(255,255,255);
            text-align: center;
            }
        </style>
    </head>

    <body>
        <div class=header>
        <a href ="index.html">
<img src = "Pictures/BluBeatsLogo2.png" alt="Logo.png" style="height:150px; width:150px; grid-column:1/2; grid-row:1/1;margin-bottom:0px; vertical-align: bottom;">
        </a>
    <ul class="nav">
        <li><a href="index.html" style="color:white;">Home</a></li>
        <li><a href="music.html" style="color:white;">Music</a></li>
        <li><a href="beats.html" style="color:white;">Beats</a></li>
        </ul> 
    </div> 
    <!-- End of Header -->

    <div class=main>
        <div class=music>

            <h1>Latest Tracks</h1>

<iframe width="75%" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/223570682&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true"></iframe>
        </div><!-- End of Music -->
    <div class=connect>
        <h1>Connect</h1>
        <div class=connectList>
           <ul>
               <a href="https://www.instagram.com/blubeats/" target="_blank">
               <li><img src = "Pictures/InstagramLogo.png" alt=IGLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> Instagram</li>
               </a>

               <a href="https://soundcloud.com/blubeatsmusic/" target="_blank">
               <li><img src = "Pictures/SoundCloudLogo.png" alt=SoundCloudLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> SoundCloud</li>
               </a>

               <a href="https://open.spotify.com/artist/4RGM8nv60UrFGArNSyCZdY" target="_blank">
               <li><img src = "Pictures/SpotifyLogo.png" alt=SpotifyLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> Spotify</li>
               </a>

            </ul> 
        </div><!-- End of connectList -->
    </div><!--End of connect -->
    <footer>
    <h1>Contact</h1>
        <ul>
            <li>Email: blubeatsmusic@gmail.com </li>
        </ul>
    </footer><!-- End of Footer -->
     </div><!-- End of Main -->
    </body>`enter code here`
</html>

CSS: CSS：

/ Font Import / @import url(' https://fonts.googleapis.com/css?family=Oleo+Script '); / 字体导入 / @import url（' https://fonts.googleapis.com/css?family=Oleo+Script '）;

body{
    background-color: rgba(63, 133, 244,.75);
    font-family: 'Oleo Script';
    margin:0px;
    padding:0px;
}

ul{
    list-style:none;
}

.nav{
    list-style: none;
    margin:0;
    float:right;
    padding-top:62px;
    display:grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap:10px;
    grid-auto-rows: repeat(1,1fr);
    grid-row:1/1;
    grid-column: 2/2;
}

.nav li{
    font-size: 64px;
    display:inline;
    color:white;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:0px;
}

.nav li:hover{
    color:#1995d3;
    cursor: pointer;
    text-shadow: 0 0 15px #1995d3;
    }

.header{
    background-color:rgba(30,30,30,.7);
    position: fixed;
    top: 0;
    padding-bottom:0;
    margin:0;
    width:100%;
}

.header a{
    height: 150px;
    width: 150px;
}

.header img{
    height: auto;
    width:auto;
    max-height: 100%;
    max-width: 100%;
}

.connect{
    width: 100%;
    max-width:100%;
}

.connectList {

    width: 100%;
    max-width:100%;

}

.connect h1{
    color:rgba(0,0,0,1);
    font-size: 64px;
    text-shadow: -3px 3px rgb(255,255,255);
    text-align:center;
}

.connectList ul{
    list-style: none;
    display:grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap:200px;
    grid-auto-rows: repeat(1,1fr);
    font-size:40px;
    color:rgba(75,75);
    text-shadow: -3px 3px rgb(255,255,255);
    text-align: center;
}

a{
    text-decoration: none;
}

a:visited{
    color:rgba(0,0,0,1);
}

connect a:hover{
    cursor:pointer;
}

footer h1{
    color:rgba(0,0,0,1);
    font-size: 36px;
    text-shadow: -3px 3px rgb(255,255,255);
    text-align:center;
}

footer ul{
    text-align:center;
    font-size: 24px;
}

.about{
    text-align:center;
    padding-top:0px;
    margin-top:0px;
}

.about h1{
    color:rgba(0,0,0,1);
    font-size: 64px;
    text-shadow: -3px 3px rgb(255,255,255);
    text-align:center;
    margin-top:0px;
    padding-top:0px;
}

.about p{
    color:rgba(0,0,0,1);
    font-size:24px;
    text-align:center;
}

.main{
    background-color:rgba(0,0,0,.5);
}

Answer 1

You're having collapsing margins . 您的利润率正在下降。 To fix this, add overflow: auto; 要解决此问题，请添加overflow: auto; to your footer : 到您的footer ：

 .music { padding-top: 130px; text-align: center; } .music h1 { font-size: 64px; color: rgba(75, 75); text-shadow: -3px 3px rgb(255, 255, 255); text-align: center; } body { background-color: rgba(63, 133, 244, .75); font-family: 'Oleo Script'; margin: 0px; padding: 0px; } ul { list-style: none; } .nav { list-style: none; margin: 0; float: right; padding-top: 62px; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: repeat(1, 1fr); grid-row: 1/1; grid-column: 2/2; } .nav li { font-size: 64px; display: inline; color: white; padding-left: 10px; padding-right: 10px; padding-bottom: 0px; } .nav li:hover { color: #1995d3; cursor: pointer; text-shadow: 0 0 15px #1995d3; } .header { background-color: rgba(30, 30, 30, .7); position: fixed; top: 0; padding-bottom: 0; margin: 0; width: 100%; } .header a { height: 150px; width: 150px; } .header img { height: auto; width: auto; max-height: 100%; max-width: 100%; } .connect { width: 100%; max-width: 100%; } .connectList { width: 100%; max-width: 100%; } .connect h1 { color: rgba(0, 0, 0, 1); font-size: 64px; text-shadow: -3px 3px rgb(255, 255, 255); text-align: center; } .connectList ul { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 200px; grid-auto-rows: repeat(1, 1fr); font-size: 40px; color: rgba(75, 75); text-shadow: -3px 3px rgb(255, 255, 255); text-align: center; } a { text-decoration: none; } a:visited { color: rgba(0, 0, 0, 1); } connect a:hover { cursor: pointer; } footer { overflow: auto; } footer h1 { color: rgba(0, 0, 0, 1); font-size: 36px; text-shadow: -3px 3px rgb(255, 255, 255); text-align: center; } footer ul { text-align: center; font-size: 24px; } .about { text-align: center; padding-top: 0px; margin-top: 0px; } .about h1 { color: rgba(0, 0, 0, 1); font-size: 64px; text-shadow: -3px 3px rgb(255, 255, 255); text-align: center; margin-top: 0px; padding-top: 0px; } .about p { color: rgba(0, 0, 0, 1); font-size: 24px; text-align: center; } .main { background-color: rgba(0, 0, 0, .5); }

 <div class=header> <a href="index.html"> <img src="Pictures/BluBeatsLogo2.png" alt="Logo.png" style="height:150px; width:150px; grid-column:1/2; grid-row:1/1;margin-bottom:0px; vertical-align: bottom;"> </a> <ul class="nav"> <li><a href="index.html" style="color:white;">Home</a></li> <li><a href="music.html" style="color:white;">Music</a></li> <li><a href="beats.html" style="color:white;">Beats</a></li> </ul> </div> <!-- End of Header --> <div class=main> <div class=music> <h1>Latest Tracks</h1> <iframe width="75%" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/223570682&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true"></iframe> </div> <!-- End of Music --> <div class=connect> <h1>Connect</h1> <div class=connectList> <ul> <a href="https://www.instagram.com/blubeats/" target="_blank"> <li><img src="Pictures/InstagramLogo.png" alt=IGLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> Instagram</li> </a> <a href="https://soundcloud.com/blubeatsmusic/" target="_blank"> <li><img src="Pictures/SoundCloudLogo.png" alt=SoundCloudLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> SoundCloud</li> </a> <a href="https://open.spotify.com/artist/4RGM8nv60UrFGArNSyCZdY" target="_blank"> <li><img src="Pictures/SpotifyLogo.png" alt=SpotifyLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> Spotify</li> </a> </ul> </div> <!-- End of connectList --> </div> <!--End of connect --> <footer> <h1>Contact</h1> <ul> <li>Email: blubeatsmusic@gmail.com </li> </ul> </footer> <!-- End of Footer --> </div> <!-- End of Main -->

Answer 2

I was able to resolve this issue by adding setting the margin of ul to 0px. 通过将ul的边距设置为0px，我能够解决此问题。 This is overwriting the default css of the browser. 这将覆盖浏览器的默认CSS。

footer ul {
    margin-bottom: 0px;
}

Answer 3

that space commes from your footer ul element. 该空间来自您的页脚ul元素。 You can cancel it with adding this to your css: 您可以通过将其添加到CSS中来取消它：

footer ul{
  text-align:center;
  font-size: 24px;
  margin-bottom: 0;
}

删除网页下方的空间

问题描述

3 个解决方案

解决方案1
2 已采纳 2017-12-18 09:21:22

解决方案2
0 2017-12-18 09:24:27

解决方案3
0 2017-12-18 09:25:05

删除网页下方的空间

问题描述

3 个解决方案

解决方案1 2 已采纳 2017-12-18 09:21:22

解决方案2 0 2017-12-18 09:24:27

解决方案3 0 2017-12-18 09:25:05

解决方案1
2 已采纳 2017-12-18 09:21:22

解决方案2
0 2017-12-18 09:24:27

解决方案3
0 2017-12-18 09:25:05