Question

我的示例网页有一个奇怪的空白空间，我无法弄清楚它为什么存在。该页面的链接在这里“http://www.albany.edu/~jc191638/html/finalproject.html”我认为在那里查看源代码比将其粘贴更容易。我所说的空白空间位于“计算机科学教科书”部分，并抛弃了底部的对齐。

页面的CSS在这里

body
{
    background-color:    #DCDDD8;
    margin:0;   
}
p
{
    clear:left;
}
hr
{
    width:98%;
}
img
{ width:100%;
height:100%;
float:center;
}
h1
{
text-align:center;
text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
border-style:solid;
border-color:    #D74B4B;
}
#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:1200px;
    float:center;
}
#upper
{
    float:center;   
}
#upperleft
{
//margin:2%;
    //border:1px solid;
//border-radius:2px;    
float:left;
    width: 600px;
    height:300px;
            //margin:0%;
//border:1px solid;
border-radius:2px;
}
#upperright
{
    //float:right;
    //margin:2%;
    //border:1px solid;
//border-radius:2px;
float:right;
    width: 600px;
    height:300px;

    //margin:0%;
    //border:1px solid;
border-radius:2px;
} 
div
{
    float:left;
}
#middle
{
    width:100%;
    float:center;

}
#header
{
    height:150px;
    width:100%;
    background-color:#DCDDD8;

}
#sidebar
{
    float:left;
    height:984px;
    width:250px;
    background-color:    #475F77;
    border-style:solid;
border-color:    #D74B4B;
}
#iphone
{
height:230px;
width:230px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
}
#bottomside
{
    background-color:    #475F77;
    padding-left:10px;
    padding-right:10px;
    text-align:center;
}
#googleglass
{
    height:230px;
    width:230px;
}
#navbar
{
width:107%;
background-color: #DCDDD8;  
}
.navele
{
    width:10%;
    text-align:center;
        border-style:solid;
border-color:    #D74B4B;;
}
a:link, a:visited
{
font-size:20px;
font-weight:bold;
color:   #475F77;
display:block;
padding-top:3px;
padding-bottom:5px; 
text-decoration:none;)
}
a:hover
{
color: #DCDDD8;
background-color:#475F77;   
}
#border
{
    height:800;
    width:150;
    border:10px;
    padding-left:50px;
}
#current
{
    float:center:
    height:984px;
    width:600px;
    background-color:    #475F77;
    padding-bottom:10px;
        text-align:center;
        border-style:solid;
    border-color:    #D74B4B;
}
#nintendo
{
    height:70%;
    width:70%;
    padding-left:10px;
}
#nintext
{
    float:right;
    padding-right:15px;
    padding-top:100px;
}
#wrapper2
{
margin-left:auto;
    margin-right:auto;
    width:125px;
    float:right;
}
#wrapper3
{
    margin-left:auto;
    margin-right:auto;
    width:600px;
    float:center;
    background-color:    #475F77;
}
#textbook
{
    height:25%;
    width:25%;
    float:left;
    padding-left:15px;

}
#wrapper4
{
    margin-left:auto;
    margin-right:auto;
    width:125px;
    float:center;
    padding-top:50px;
    padding-left:150px;
}
#iclicker
{
    height:30%;
    width:30%;
    float:left;
    padding-left:15px;
    padding-bottom:10px;
}
#clicktext
{
    float:right;
}
#wrapper5
{
    margin-left:auto;
    margin-right:auto;
    width:250px;
    float:center;
    padding-top:75px;
    padding-left:250px;
}
#bar
{
    width:100%;
    }
#pens
{
 height:40%;
 width:40%;
 float:left;
 padding-left:15px;
 }
#wrapper6
{
margin-left:auto;
    margin-right:auto;
    width:150px;
    float:center;
    padding-top:50px;
    padding-left:300px;
}
#rightbar
{
float:right;
    height:984px;
    width:250px;
    background-color:    #475F77;
    text-align:center;
border-style:solid;
border-color:    #D74B4B;
}
#login
{
float:center;
padding-left:15px;
}
#bottom
{
    width:1197px;
    height:30px;
    text-align:center;
    background-color:    #475F77;
    border-style:solid;
    border-color:    #D74B4B;
    padding-top:15px;
    margin-top:15px;
}
#items
{
    width:70%;
    text-align:center;
    float:left;
}
#cart
{
    width:30%;
    text-align:center;
    text-style:bold;
    float:right;
}
#fb
{
    height:5%;
    width:18%
}

Answer 1

你有不同的问题：

您使用大于内容高度的自定义高度
你有填充
你有边距
您有空段落，默认情况下有边距。请解决这个问题，这是非语义的。

我不能更具体，因为我不知道你想要哪些空格以及你不想要哪些空格。

然后，我的建议是：学会调试。

例如，如果您使用Firefox，请右键单击具有边距的元素，选择“检查元素”，然后将打开Page Inspector。 Chrome和IE也有类似的工具。

Answer 2

您需要删除#nintext（<p id="nintext"></p>是<div id="wrapper3"></div>的孩子）。它有padding-top 100px导致您的问题。

无法弄清楚空间来自哪里

2 个答案: