2013-12-07 71 views
-1

我的示例網頁有一個奇怪的空間空間,我只是無法弄清楚它爲什麼在那裏。該頁面的鏈接在這裏「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% 
} 
+0

不確定哪個空間打擾你,但它有時是共同執行像CSS中的「復位」:身體,HTML { 保證金:0; 填充:0; } – NoChance

+2

請刪除不必要的空格來清理此代碼。這將使其更具可讀性。 – BuddhistBeast

回答

1

您需要移除#nintext<p id="nintext"></p><div id="wrapper3"></div>的小孩)。它有一個padding-top100px這是造成你的問題。

1

你有不同的問題:

  • 您使用的不是內容的高度更大定製高度
  • 你有墊襯
  • 你有利潤
  • 您有空的段落,默認情況下有餘量。請解決這個問題,它是非語義的。

我不能更具體,因爲我不知道你想要哪個空間,哪些你不想要。

然後,我的建議是:學會調試。

例如,如果您使用的是Firefox,右鍵單擊它具有保證金的元素,選擇檢查元素,並Page Inspector將打開。 Chrome和IE有類似的工具。