html移除空格解決瀏覽器上的空白區

今天在切圖的時候，碰到一個相容性的問題，很幸運最後透過張金鑫老師的文章解決了這個問題！但在閱讀張老師文章的時候，我有個地方不明白，在網上查了下也沒找到我想要的答案，後來自己想了半天好像是這麼回事，現在我把我的想法寫出來，如果有不對的地方，大家一定要指出哦。

如圖（範例1）：

這是張老師文章中的一段例子程式碼，程式碼的結構是一個div包含著3個a元素，每個a元素之間都是各佔一行，所以顯示在瀏覽器上時，a元素之間會有一個間隙，如圖：

##那麼問題來了！將程式碼改成這樣，如圖（範例2）：

最後的結果是這樣的，如圖：

a元素之間的間距居然消失了！為什麼在程式碼上的一些輕微的改變就會產生不一樣的結果呢？這讓處女座的我陷入了深深的思考…@-@！

我是這麼理解的：例子1中的程式碼，a元素與a元素之間的間距是屬於元素與元素之間的距離，最終在瀏覽器中顯示空白，借用張老師中文章的一段話「元素間留白間距出現的原因就是標籤段之間的空格，因此，去掉HTML中的空格，自然間距就木有了。」將視角轉到事例2,在圖片中，如下：

程式碼與程式碼存在空白的部分，但這空白的部分是屬於元素與內容之間的距離（a元素與它的內容）不是張老師在文章中提到的元素與元素間的留白間距，所以在瀏覽器中顯示出來就不會產生留白間距。 so？在程式碼中的一些輕微的改變就有可能幫助你解決大問題哦！如上例將元素與元素的間距變成元素與內容之間的間距，就幫我解決了相容性的問題！

以上就是我在今天所收穫的知識，當然我的理解可能會有錯誤，但如果你有不同的想法一定要說出來哦！評論~

以上是html移除空格解決瀏覽器上的空白區的詳細內容。更多資訊請關注PHP中文網其他相關文章！