刪除標題和導航之間的間距

我正在嘗試爲我自己的網頁設計公司構建我的網站。有點諷刺的是，考慮到我提出了一個基本問題，我正在這樣做。另一方面，我只是建立基礎網站來獲得經驗。我的問題是，我試圖刪除標題和導航欄之間的差距。我試圖將它們都設置爲固定位置，然後設置「頂部」值，但是當瀏覽器窗口重新調整大小時，所有內容都不合適。它需要在移動和桌面設備上進行響應和查看。刪除標題和導航之間的間距

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Picasso</title> 
     <link rel="stylesheet" href="styling.css"> 
    </head> 
    <body> 
     <header> 
      <img src="img/pwd_logo_05.png" alt="logo" id="logo"> 
      <h2>For Desktop &amp; Mobile </h2> 
     </header> 
     <nav> 
      <ul> 
       <li>Donate</li> 
       <li>Request</li> 
       <li>Contact</li> 
       <li>Home</li> 
      </ul> 
     </nav> 
    </body> 
    <footer> 

    </footer> 
</html>

CSS

header { 
    background-color: whitesmoke; 
} 

#logo { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    padding-top: 1.5em; 
    width: 30%; 
    height: 30%; 
} 

h2 { 
    padding-bottom: 1em; 
    text-align: center; 
    font-family: sans-serif; 
} 

nav { 
    width: 100%; 
    background-color: black; 
} 

ul { 
    list-style-type: none; 
    overflow: hidden; 

} 

li { 
    text-decoration: none; 
    text-align: center; 
    float: right; 
    padding: .875em 1em; 
    color: whitesmoke; 
    font-family: sans-serif; 
} 

body { 
    background-image:url(img/background.png); 
}

來源

2016-03-27 sokunato

試試這個CSS，從列表中刪除默認的填充和邊距：'nav> ul {margin：0;填充：0;}' – Akis

從li CSS刪除padding-bottom: 1em;從h2 CSS和padding: .875em 1em;。

填充將基本上預留元素周圍的空間，導致您現在看到的空白。從CSS刪除填充將刪除該空間。

我提出的建議會回答你的問題，但可能不是最好的解決方案 - 你想學習一些關於填充，然後改變你的CSS，以便填充應用在正確的位置，並避免在錯誤的。

來源

2016-03-28 00:02:12 millerbr

我嘗試了兩個，但沒有解決。我認爲填充適用於容器的內部，並且邊緣是在容器外創建空間的原因。 – sokunato

這是因爲您的標題H2設定了保證金。嘗試將其「margin-bottom」設置爲0.

UL元素的「margin-top」相同。

來源

2016-03-28 00:05:06

0沒有工作，所以我試了一個負值，解決了問題 – sokunato

嗯。 0應該工作;嘗試0px而不是，但也許有你的整個代碼中的其他內容會干擾它？ Ps：如果您沒有發現問題，請不要輸入負數。如果您想在現場測試，請使用檢查員（右鍵單擊>檢查）：它會顯示您正是什麼導致元素之間的間距。網上有很多教程可以幫助你使用這些有用的工具; D –

刪除標題和導航之間的間距

回答

相關問題