為什么導航和標題div之間存在間隙/空間？
[英]Why is there a gap/space between the navigation and header divs?
問題描述
希望有人可以解釋為什么“ nav”和“ header” div之間存在差距？ 我認為這與文本有關，但找不到CSS的正確解決方案。 任何幫助都非常感謝:)
html, body{ margin: 0; padding: 0; height:100%; } body { background-color: black; font-size: 0.8em; } audio { width: 300px; } .header { width: 100%; height: 10%; font-size: 0.9em; font-family: sans-serif; text-align: center; color: white; background-color: brown; padding: 0; margin: 0; } .nav { width: 100%; height: 7%; padding: 0; margin: 0; background-color: grey; } #main { width: 100%; height: 100%; } .lyrics { max-width: 80%; margin: 0 auto; height: auto; padding: 20px 50px 20px 50px; color: white; }
<html> <head> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <title> Test </title> <body> <div id="main"> <div class="nav"> </div><!-- nav --> <div class="header"> <h1>Web Page</h1> </div><!--header--> <div class="lyrics"> <p>text1</p> <p>text2</p> <p>text3</p> </div> <!-- lyrics --> </div> <!-- main div --> </body> </html>
2 個解決方案
解決方案1
1 已采納 2015-03-27 23:31:13
我相信您是在談論“網頁”標題上方的空白嗎？ 在這種情況下，您只需要刪除h1的上邊距，就像我在下面所做的那樣：
html, body{ margin: 0; padding: 0; height:100%; } body { background-color: black; font-size: 0.8em; } audio { width: 300px; } .header { width: 100%; height: 10%; font-size: 0.9em; font-family: sans-serif; text-align: center; color: white; background-color: brown; padding: 0; margin: 0; } .nav { width: 100%; height: 7%; padding: 0; margin: 0; background-color: grey; } #main { width: 100%; height: 100%; } .lyrics { max-width: 80%; margin: 0 auto; height: auto; padding: 20px 50px 20px 50px; color: white; } h1 { margin-top: 0; }
<html> <head> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <title> Test </title> <body> <div id="main"> <div class="nav"> </div><!-- nav --> <div class="header"> <h1>Web Page</h1> </div><!--header--> <div class="lyrics"> <p>text1</p> <p>text2</p> <p>text3</p> </div> <!-- lyrics --> </div> <!-- main div --> </body> </html>
解決方案2
0 2015-03-28 01:00:39
刪除h1的上邊距
為什么這兩個div之間存在差距
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.