頂部，右側和左側的CSS邊距差距

爲什麼我的水平導航欄的頂部，右側和左側存在空隙？我不想要這些差距。我只想讓導航欄從視口的0,0開始，這樣就沒有屏幕空間的浪費。頂部，右側和左側的CSS邊距差距

HTML

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
     <ul id="nav"> 
      <li><a href="#">WORK</a></li> 
      <li><a href="#">BLOG</a></li> 
      <li><a href="#">ABOUT</a></li> 
      <li><a href="#">CONTACT</a></li> 
     </ul> 
</body> 
</html>

CSS

#nav { 
     list-style-type: none; 
     margin: 0 auto; 
     padding: 0; 
    } 

    #nav li { 
     width:25%; 
     float: left; 
     text-align: center; 
    } 

    #nav li a { 
     display: block; 
     padding: 0.5em 5px; 
     text-decoration: none; 
     font-weight: bold; 
     color: #F2F2F2; 
     -webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3); 
     box-shadow: 3px 3px 3px rgba(51,51,51,0.3); 
    } 

    #nav a:link, #nav a:visited { 
     background-color: #071726; 
    } 

    #nav a:hover, #nav a:active, #nav a:focus { 
     background-color: #326773; 
    }

來源

2013-10-01 user2834739

像這樣

demo

CSS

*{ 
    margin:0; 
    padding:0; 
}

來源

2013-10-01 12:12:37 falguni

沒有，還是有向右側，左側和頂部的差距:-( – user2834739

@ user2834739這裏尋找做了我不找你缺口寫* {保證金：0;填充：0;}在樣式表 – falguni

對不起，我沒有看到選擇器'*' – user2834739

默認情況下，文件/身體有餘量。你可以通過設置下面的css規則來「禁用」它。

body, html{margin:0;padding:0}

來源

2013-10-01 12:14:01

謝謝，kasper。是填充需要嗎？ – user2834739

@ user2834739填充不是必須在這裏，看到我發佈的答案 –

不，這是沒有必要的但是每個人都包容我:-)。這是身體的差距給出了「差距」。 –

這裏是reference

讓它作爲

body{ 
    margin:0px; 
}

來源

2013-10-01 12:14:25

它現在可以像魅力一樣工作。:-) – user2834739

@ user2834739歡迎您來看看發佈的JSBin。請標記爲答案 –

你重置你的CSS？否則，使用（在你的CSS文件的頂部）

* { 
    padding: 0; 
    margin: 0; 
}

來源

2013-10-01 12:14:44 SKeurentjes

考慮使用復位/ CSS標準化： normalize， reset。

您還應該閱讀this以更好地理解事物。

來源

2013-10-01 12:20:27 shem86

設置餘量和/或填充到0在主導航元件或鏈接。。

nav li { 
    padding:0; 
    margin:0; 
}

來源

2013-10-01 12:55:01 Comms

頂部，右側和左側的CSS邊距差距

回答

相關問題