如何消除網頁頂部的一行空白?

昨天群里一朋友詢問網頁頂部一行空白無法去除的解決辦法。常見的解決辦法均不能解決問題。深入研究了下，總結幾點以加強記憶。
一、沒有正確使用margin設置邊距，margin指的是空白長度，用於控制容器中的內容和容器邊緣的距離。

view source

 

print ?

1	<style type="text/css">

2

body{

3	padding: 0px;

4	margin: 0px;

5

}

6

</style>

二、人為疏忽，尤其在是腳本語言的源代碼里多出了一行空白，解決辦法自然是刪掉空白行就OK。

 對於瀏覽器來說，源代碼里回車符都不大會解釋輸出，但是偶爾也會出現源代碼里的回車造成顯示頁面也換行的問題（linux和windows的回車符在文件編碼中不同），這個問題就要注意一下代碼的規范性。

 

三、編碼問題。 類似WINDOWS自帶的記事本等軟件，在保存一個以UTF-8編碼的文件時，會在文件開始的地方插入三個不可見的字符（_0xEF _0xBB _0xBF，即BOM——Byte Order Mark）。它是一串隱藏的字符，用於讓記事本等編輯器識別這個文件是否以UTF-8編碼。對於一般的文件，這樣並不會產生什么麻煩。但對於 PHP來說，PHP在設計時就沒有考慮BOM的問題，不會忽略UTF-8編碼的文件開頭BOM的那三個字符，會把BOM作為該文件開頭正文的一部分。 由於 必須在<?或者<?php后面的代碼才會作為PHP代碼執行，所以將會造成在頁面上輸出這三個字符，顯示效果就要看瀏覽器了，一般是一個空行 或是一個亂碼。由於在html一開頭有這3個字符的存在，即使頁面的 top padding 設置為0，也無法讓整個網頁緊貼瀏覽器頂部。此問題除了能使網頁莫名出現一行空白外 ，由於受COOKIE送出機制的限制，在這些文件開頭已經有BOM的文件中，COOKIE無法送出（因為在 COOKIE送出前PHP已經送出了文件頭），所以登入和登出功能失效。一切依賴COOKIE、SESSION實現的功能全部無效。 解決辦法： 在編輯、更改任何文本文件時，請務必使用不會亂加BOM的編輯器。Linux下的編輯器應該都沒有這個問題。WINDOWS下，請勿使用記事本等編輯器。推薦的編輯器是： Editplus 2.12版本以上； EmEditor； UltraEdit（需要取消‘添加BOM’的相關選項）； Dreamweaver（需要取消‘添加BOM’的相關選項）； Notepad(需要進行“轉換為不帶BOM的UTF-8”)等。 對於已經添加了BOM的文件，要取消的話，可以用以上編輯器另存一次。（Editplus需要先另存為gb，再另存為UTF-8。）

 

四、js代碼的影響 。在網頁中一些廣告引入js或者某些輸出內容的js代碼，可能引起網頁頂部空白的問題。解決辦法就是采用輪流去掉js的方法找出有問題的js代碼，然后修改。

 

五、特殊字符的影響。 復制粘貼文本（尤其從Word粘貼）時可能有一些特殊的字符造成瀏覽器顯示出錯，例如版權符，在HTML代碼里應該使用 &copy; 來顯示，如果直接在源代碼粘貼這個符號，就會出問題，同樣的問題還會有空格符等等。

 

六、腳本語言函數存在的問題 。可能是程序里哪個函數哪個類無意中輸出的錯誤，這個錯誤要檢查一下代碼。