margin-bottom 或 padding-bottom 不起作用

Question

我是新手，为什么我的页面底部有黑色 space 我如何删除它，margin-bottom 不起作用，我的意思是当你向下滚动时有黑色 space 我想被删除。如果有人复制这个也没关系:D

< !DOCTYPE html>
< html lang="en">
    < head>
        < meta charset="utf-8" />
        < title> HTML5 Only Test Case&#8212; Accessible Culture 
< /title>
        < !--[if IE] > 
< script src="/js/html5.js"> 
< /script><![endif]-->
        < style>
.all{
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:12px;
        color:#fff;
        margin: auto ;
        padding-top:30px;
        position:relative;
        height:2100px;
        border: 1px solid red;
        width:1050px;
        background-color: #090909;
        margin-top:25px;
        margin-bottom:0px;
        }


.backgroound{ 
         padding:0px;
        position:relative;
        background-color: gray;
        border: 1px solid gray;
        width:985px;
        margin-top:-23px;
        height:1929px;
       background-size:cover;
        margin: auto auto auto auto 10px;
        }
.foooter{
     padding-top:30px;
     padding-bottom:50px;
     position:relative;
     text-align:center;
     width:1052px;
     background-color:red;
     margin: auto;
     margin-top: -100px;
     right:0px;
}.paa{

     background-color:black;
     font-size:40px;
     position:relative;
     border: 1px solid gray;
     padding: 0px;
     text-align:center;
        height:80px;
        margin-top:-30px;
     }
.paa img{
     position:absolute;
     height:75px;
     width:210px;
     top:3px;
     left:260px;
     padding:0px;
     margin:0px;
}ul{
 border: 1px solid gray; 
width:99.89%;
 position:relative;
 top:-10px;
 padding:0px;
 background-color:white;
}
ul li, a {
display:inline-block;
}
#home {
text-decoration:none;
}
#music {
text-decoration:none;
}
a.vari:hover {
    background-color: lightgray;
}a.vari:active {
    color: aliceblue;
} 
#memberlist_links a{
float:right;
position:relative;
top:-1800px;
padding:0px;
color:white;
margin:0px;
right:40px;
}
#browsebyartist{
float:right;
position:relative;
top:-2100px;  
font-size: 10px;     
 font-weight: bold;     
padding:0px;
margin:0px;
right:10px;
}
.paneelinpaa{
border:1px solid black;
background-color:lightblue;
width:500px;
height:250px;
}
.paneelinvartalo{
border:1px solid black;
background-color:lightblue;
margin-top:0px;
padding:15px;
height:200px;
width:200px;
}
body{
height: 2100px;
background-color:black;
}
< /style>
< /head>
< body >
< div class="all">
  < header class="paa">
        < a href="http://www.cc.puv.fi/~e1401168/boilerplate2.html"> 
< img src="loggo.jpg" alt="loggo"> 
< /a>
  < /header>
< nav>
  < ul>
    < li>
< a class="vari" href="http://www.cc.puv.fi/~e1401168/boilerplate2.html" id="home" >
< span  >Home
< /span>
< /a> 
< /li>
    < li> 
< a class="vari" href="#" id="music">Music videos < /a> 
< /li>
  < /ul>
< /nav>
< div class="backgroound">
    < div id="panel2" class="paneelinpaa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pää
    < /div>
< div id="panel1" class="paneelinvartalo">vartalo
< /div>
< /div>
< div id="memberlist_links">
   < a href="#"> #
< /a>
 < br>
< a href="#" rel=""  class="nappulat" data-panelid="panel1">A
< /a>
 < br>
< a href="#" rel="" class="nappulat" data-panelid="panel2">B
< /a>
 < br>
< a href="#" rel="" class="nappulat" data-panelid="panel3">C
< /a> 
< br>
< a href="#" rel="" class="nappulat" data-panelid="panel4">D
< /a>
 < br>
< a href="#" rel="" class="nappulat" data-panelid="panel5">E
< /a> 
< br>
< a href="#" rel="" class="nappulat" data-panelid="panel6">F
< /a> 
< br>
< a href="#" rel="" class="nappulat" data-panelid="panel7">G
< /a>
 < br>
< a href="#" rel="" class="nappulat" data-panelid="panel8">H
< /a> 
< br>
< a href="#" rel="" class="nappulat" data-panelid="panel9">I
< /a> 
< br>
< a href="#" rel="" class="nappulat" data-panelid="panel10">J
< /a>
 <br>
< a href="#" rel="" class="nappulat" data-panelid="panel11">K
< /a> 
<br>
< a href="#" rel="" class="nappulat" data-panelid="panel12">L
< /a> 
<br>
< a href="'#" rel=""class="nappulat" data-panelid="panel13">M
< /a>
 <br>
< a href="#" rel="" class="nappulat" data-panelid="panel14">N
< /a>
 <br>
< a href="#" rel="" class="nappulat" data-panelid="panel15">O
< /a>
 <br>
< a href="#" rel="" class="nappulat" data-panelid="panel16">P
< /a> 
<br>
< a href="#" rel="" class="nappulat" data-panelid="panel17">R
< /a> 
<br>
< a href="#" rel="" class="nappulat" data-panelid="panel18">S
< /a>
 <br>
< a href="#" rel="" class="nappulat" data-panelid="panel19">T
< /a> 
<br>
< a href="#" rel="" class="nappulat" data-panelid="panel20">U
< /a> 
<br>
< a href="#" rel="" class="nappulat" data-panelid="panel21">V
< /a>
 < br>
<a href="#" rel="" class="nappulat" data-panelid="panel22">W
< /a> 
< br>
< a href="#" rel="" class="nappulat" data-panelid="panel23">X
< /a> 
< br>
< a href="#" rel="" class="nappulat" data-panelid="panel24">Y
< /a> 
< br>
< a href="#" rel="" class="nappulat" data-panelid="panel25">Z
< /a> 
< /div>

            < div id="browsebyartist">
< br>
            B< br>
            r< br>
            o< br>
            w< br>
            s< br>
            e< br>
            < br>
            B< br>
            y< br>
            < br>
            A< br>
            r< br>
            t< br>
            i< br>
            s< br>
            t< br>

            < /div>
< /div>
< footer class="foooter" >
Made by
< /footer>
< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
< /script>
< script>
$(function(){
$('.nappulat').on('click',function(p){
// koska href="#" painaessa skrolla sivua ylös .preventDefault pysäyttää sen
        p.preventDefault();
    var panelid =$(this).attr('data-panelid');
    $('#'+panelid).toggle(1);
             });   
    });
< /script>
    < /body>
< /html>

Answer 1

您需要设置为 .memberlist_links position:absolute 这样它就不会在文档中 "take a place" 了。无论如何，它必须绝对位于父 .all.
对#browsebyartist做同样的事情。

当然，随着这些变化，您需要从一开始就固定位置，但您别无选择。如果将位置设置为 relative，此元素将出现在文档中并显示那些空格。

margin-bottom 或 padding-bottom 不起作用

margin-bottom or padding-bottom not working

jquery

space

margin

padding