橫幅和身體之間不需要的白線

我在巴西製作訂閱箱式網站。我做了一個橫幅，在它下面是一條白線。我想移除它，並已使用display：block;但無濟於事。這是我第一次寫網站，所以可能會出現一些錯誤。橫幅和身體之間不需要的白線

body { 
 
    margin-top: 0px; 
 
    margin-right: 0px; 
 
    margin-bottom: 0px; 
 
    margin-left: 0px 
 
} 
 
#menu { 
 
    height: 50px; 
 
    background-color: #383027; 
 
    font-size: 17px; 
 
    font-family: Arial; 
 
} 
 
#menu ul { 
 
    height: auto; 
 
    padding: 0px 150px; 
 
    margin: 0px; 
 
} 
 
#menu li { 
 
    display: inline; 
 
    padding: 5px; 
 
} 
 
#menu a { 
 
    text-decoration: none; 
 
    color: #fff5e6; 
 
    padding: 8px 8px 8px 8px; 
 
} 
 
#menu a:hover { 
 
    color: #e4a251; 
 
} 
 
#divider { 
 
    height: 7px; 
 
    background-color: #b68a20; 
 
} 
 
#body { 
 
    height: 700px; 
 
    background-color: #faebc9; 
 
} 
 
#footer { 
 
    height: 180px; 
 
    background-color: #2d2419; 
 
}

<div id="container"> 
 
    <div id="menu"> 
 
     <a href="home2.html"> 
 
     <img src="paonamesalogoofficial.png" align="left"> 
 
     </a> 
 
     <ul align="center"> 
 
     <li><a href="home2.html">HOME</a> 
 
     </li> 
 
     <li><a href="planos.html">PLANOS</a> 
 
     </li> 
 
     <li><a href="areadeatuacao.html">ATUAÇÃO</a> 
 
     </li> 
 
     <li><a href="perguntasfrequentes.html">PERGUNTAS</a> 
 
     </li> 
 
     <li><a href="assineagora.html">ASSINE AGORA</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    <div id="divider"></div> 
 

 
    <div id="header"> 
 
     <img src="bannerpao1.png" width="100%"> 
 
    </div> 
 

 
    <div id="divider"></div> 
 

 
    <div id="body"></div> 
 

 
    <div id="divider"></div> 
 

 
    <div id="footer"></div> 
 
    </div>

來源

2016-02-26 Leandro Silva

說白線，基本上，這個丟失的圖像''。 –

由於橫幅位於標籤內，因此我建議您使用「頁面內容」或簡單地「內容」而不是「正文」來避免錯誤。 –

，則應該更換display類型圖片的標題裏面block，因爲它默認爲inline它給你的文字基線以下的自由空間一些像素，併爲每個人知道行內元素是作爲文本處理。

請參閱下面的解決方案。

此外，如果您在任何現代瀏覽器中使用檢查工具檢查了這一點，您會注意到標題的下方沒有空白，但只有圖像。如果您將標題設置爲背景顏色，那麼您會將其直接連接到下面的div。在我的解決方案中，我給出了標題background-color的red。

<style> body { 
 
    margin-top: 0px; 
 
    margin-right: 0px; 
 
    margin-bottom: 0px; 
 
    margin-left: 0px 
 
} 
 
#menu { 
 
    height: 50px; 
 
    background-color: #383027; 
 
    font-size: 17px; 
 
    font-family: Arial; 
 
} 
 
#menu ul { 
 
    height: auto; 
 
    padding: 0px 150px; 
 
    margin: 0px; 
 
} 
 
#menu li { 
 
    display: inline; 
 
    padding: 5px; 
 
} 
 
#menu a { 
 
    text-decoration: none; 
 
    color: #fff5e6; 
 
    padding: 8px 8px 8px 8px; 
 
} 
 
#menu a:hover { 
 
    color: #e4a251; 
 
} 
 
#header { 
 
    background-color: red; 
 
} 
 
#header img { 
 
    display: block; 
 
} 
 
#divider { 
 
    height: 7px; 
 
    background-color: #b68a20; 
 
} 
 
#body { 
 
    height: 700px; 
 
    background-color: #faebc9; 
 
} 
 
#footer { 
 
    height: 180px; 
 
    background-color: #2d2419; 
 
} 
 
</style>

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Paozinho</title> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <div id="menu"> 
 
     <a href="home2.html"> 
 
     <img src="paonamesalogoofficial.png" align="left"> 
 
     </a> 
 
     <ul align="center"> 
 
     <li><a href="home2.html">HOME</a> 
 
     </li> 
 
     <li><a href="planos.html">PLANOS</a> 
 
     </li> 
 
     <li><a href="areadeatuacao.html">ATUAÇÃO</a> 
 
     </li> 
 
     <li><a href="perguntasfrequentes.html">PERGUNTAS</a> 
 
     </li> 
 
     <li><a href="assineagora.html">ASSINE AGORA</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    <div id="divider"></div> 
 

 
    <div id="header"> 
 
     <img src="bannerpao1.png" width="100%"> 
 
    </div> 
 

 
    <div id="divider"></div> 
 

 
    <div id="body"></div> 
 

 
    <div id="divider"></div> 
 

 
    <div id="footer"></div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-02-26 10:07:36 klaar

這工作。感謝您的解決方案和解釋！ –

如果確實有效，請將答案標記爲解決方案。這將鼓勵用戶不斷回答未來的問題。 – klaar

橫幅和身體之間不需要的白線

回答

相關問題