空格html的

Question

我學會了HTML和CSS最近，有件事情我不知道如何刪除我的網站底部的空格：http://puu.sh/kSu7r/2fd0ed9532.png

而且我有一個酒吧http://puu.sh/kSudx/2d6c69a679.png，我想是固定（保持就算我向下滾動），但因爲它的代碼涉及的位置是：相對於它不工作..

下面的代碼：

.bar { 
 
\t padding:0px; 
 
\t background-color:#333333; 
 
\t height:60px; 
 
\t top: -10px; 
 
\t width:100%; 
 
\t text-align:center; 
 
} 
 

 
.bar ul { 
 
\t position:relative; 
 
    transform: translateY(-50%); 
 
    top: 50%; 
 
} 
 

 

 
.bar li { 
 
\t display:inline; 
 
\t color:white; 
 
\t font-style:Verdana; 
 
\t text-align:center; 
 
\t font-size:2em; 
 
\t font-family:'Raleway'; 
 
\t margin:10px; 
 
\t padding:10px; 
 
} 
 

 
.bar a { 
 
\t text-decoration:none; 
 
\t color:white; 
 
}

<div class="bar"> 
 
<ul> 
 
<li class="btn"><a href="#bottom">Element1</a></li> 
 
<li class="btn"><a href="#bottom">Element2</a></li> 
 
<li class="btn"><a href="#bottom">Element3</a></li> 
 
<li class="btn"><a href="#bottom">Element4</a></li> 
 
</ul> 
 
</div>

非常感謝。

Answer 1

所以首先我從CSS開始：.bar。幾件事我會改變。

對於.bar類我將刪除padding:0;,height:40px,top:-10px;。您刪除padding，因爲div標籤已經沒有填充，height將由ul（稍後更多）控制。我相信你使用top來擺脫空白，但我們稍後再解決。

接下來我們去ul標籤。刪除position:relative;,transform:translateY(-50%);和top:50%;。然後添加margin:0;和padding:20px 0。我可以告訴你試圖用position來將ul居中在你的.bar div中。我們通過padding增加處理。我刪除margin，因爲ul標記已經建立了邊距，並且您要刪除該標記，否則您將有空白。

最終觸摸是li標記。我只需將display: inline;更改爲display: inline-block即可讓ul填充工作。

這僅適用於您添加到您的文章中的代碼，不瞭解您鏈接的其他問題，可能需要代碼。希望這有助於！

EDITED

body { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-family: 'Helvetica'; 
    background-color: #E6E6E6; 
} 


.bar { 
    background-color:#333333; 
    width:100%; 
    text-align:center; 
} 

.bar ul { 
    margin: 0; 
    padding: 20px 0; 
} 


.bar li { 
    display:inline-block; 
    color:white; 
    font-style:Verdana; 
    text-align:center; 
    font-size:2em; 
    font-family:'Raleway'; 
    margin:10px; 
    padding:10px; 
} 

.bar a { 
    text-decoration:none; 
    color:white; 
}