2013-03-13 78 views
0

在這裏,我有一個非常簡單的網頁。一個div,基本上。但是,儘管我的寬度設置爲100%,但該div的周圍沒有任何區域。這是一張照片展示。HTML/CSS - 爲什麼我的頁面周圍有一個很小的空白區域?

enter image description here

下面是我的代碼。

<html> 
    </head> 

     <link href='mainStyle.css' rel='stylesheet'/> 

     <script src='jquery.js'></script> 

    </head> 
    <body> 

     <div id='navTop'></div> 

    </body> 
</html> 

而且我mainStyle.css:

#navTop{ 
    width:100%; 
    height:10px; 
    background-color: blue; 
    position: absolute; 
    margin: none; 
    padding: none; 
} 

這可能僅僅是一個愚蠢的錯誤CSS。任何幫助表示讚賞!

+0

頁面'body'具有由瀏覽器應用的頁邊距 - 它被稱爲用戶代理樣式表。 – Ryan 2013-03-13 00:58:17

回答

3

添加:

body { 
margin: 0; 
} 

瀏覽器默認給餘量的<body> 8像素

3

瀏覽器對各種元件,包括htmlbody和預設保證金/填充。如果你想讓你的div直接走到邊緣,你需要將它們設置爲零。

+0

不同的瀏覽器都有不同的表現,所以海事組織最好覆蓋所有可能的情況。這當然不會傷害任何東西。 – 2013-03-13 00:59:00

0

這可能是因爲你<body>需要有它的邊距和填充設置爲0

CSS:
body { margin: 0px; padding: 0px; }

0

您的瀏覽器有默認樣式(字體大小,字體familly ,行高等,包括文檔周圍的邊距和填充)。

爲了避免文件有多餘的空間,您可以添加在你的CSS:

body,div,p { margin:0;padding:0; } 

所以這些元素不會保留默認值。

另一種奇特的方法是使用CSS reset script以確保幾乎所有默認樣式被覆蓋爲0/null,因此只有您自己的規則可以計數。