解決img下邊距

今天在製做一個網頁的時候又碰到以往曾經碰到的問題，在圖片下面會出現莫名的下邊距，恰好此次製做不像以往那麼急，因此抽出空來測試了下，發現，在FF中下邊距大概是多出了3像素左右，而IE6更多，在IE8中展現倒是無缺的，以往的作法只須要將img定義爲塊狀級就解決了問題，而對於其原理卻一直都不知道，今天google了下很榮幸的找到了答案： 「圖片底部的空隙實際上涉及行內元素的佈局模型，圖片默認的垂直對齊方式是基線，而基線的位置是與字體相關的。因此在某些時候，圖片底部的空隙多是 2px，而有時多是 4px 或更多。不一樣的 font-size 應該也會影響到這個空隙的大小。

若是將圖片的垂直對齊方式設置爲 top 或 bottom，咱們會發現這個空隙也會消失。

行內元素的格式化實際上比咱們想像的要複雜得多，這也是我至今不肯面對的一個知識點。還好它並不經常使用。

p.s. 我如今甚至懷疑書上提到的「某些瀏覽器」指的是第一個能顯示圖片的瀏覽器 Mosaic。由於剛剛在翻閱《CSS權威指南(第三版)》中文版時，在第 204 頁發現了它，而那一頁講述的正是行內元素的佈局模型。我最近也在研究瀏覽器的歷史，歷史真的很是有意思。」這個是藍色理想中版主說的一句話，我仔細的測試了下，確實給圖片定義vertical-align也能夠解決這個問題，我一直覺得是覺得沒有清除img這些元素的默認內外邊距引發的，如今才知道原來行內元素也有它的默認佈局模型，這些佈局模型不單單只是塊狀級元素纔有的！看來css不單單是要掌握技巧還有它的原理這樣才能本身知道問題解決問題了，還要加油啊！

ps:解決辦法給img定義vertical-align或者定義爲塊狀，最優的解決辦是定義vertical-align，注：定義vertical-align爲middle時在IE6中大概還有一像素的頂邊距，最好爲top或bottom。固然還有種極端解決辦法你們能夠試試就是將  父容器的字體大小爲零，font-size:0