關於img標簽間距問題：多個img之間有間距，包含img標簽的div之間有間距。
代碼如下：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <link rel="stylesheet" type="text/css" href="css/test.css"> 7 </head> 8 <body> 9 <div> 10 <img src="images/1.png"> 11 <img src="images/2.png"> 12 <img src="images/3.png"> 13 </div> 14 <div> 15 <img src="images/4.png"> 16 <img src="images/5.png"> 17 <img src="images/6.png"> 18 </div> 19 <div> 20 <img src="images/7.png"> 21 <img src="images/8.png"> 22 <img src="images/9.png"> 23 </div> 24 </body> 25 </html>
谷歌瀏覽器效果：
火狐瀏覽器效果：
我們發現，不同div之間，上下有空白間隙，不同img之間，左右有間隙，而且，不同瀏覽器的左右間隙大小不同。
經學習，我的解決辦法是，同一個div下不同img標簽之間不要留空格，並給img的父元素div標簽加上屬性font-size:0。這樣一來，所有的圖片就能夠無縫拼接了。
最終效果圖：
下面來說一下為什么這樣做可以解決問題。
塊級元素包含內聯元素如圖片文字等時，內聯元素默認是和父級元素的baseline（基線）對齊的，而baseline又和父級元素底邊有一定的距離（這個距離和font有關，不一定是5px），所以以上代碼的效果中不同div之間有間隙，這是因為圖片與父元素的底邊有距離。說到baseline呢，其實它是vertical-align屬性的默認值，vertical-align屬性是設置元素的垂直排列的，用來定義行內元素的基線相對於該元素所在行的基線的垂直對齊，除了baseline對齊方式之外，還可以是sub | super | top | text-top | middle | bottom | text-bottom |inherit（任何的版本的Internet Explorer （包括 IE8）都不支持屬性值 "inherit"）。
知道了問題產生的原因，就好對症下葯解決問題了，其實就是要消除baseline對齊方式產生的距離。
所以方法一，很容易想到，把對齊方式改一下不就好了，於是設置img的vertical-align屬性為bottom；
方法二就是上文說的給父元素加上font-size:0的屬性，既然這個距離和font有關，那么把字體大小設為0，總該沒有距離了吧；
方法三可由方法二想到，既然為0可以，那把行高設的很小可不可以呢？經試驗發現，本例圖片大小為200px，設line-height不大於12就能夠消除間隙了，鑒於這個距離一般是5px，所以可以把line-height設為5px左右；
另外一個間隙是多個img標簽的左右間隙，是由於img標簽是行內元素，而事實是當行內元素之間有“回車”、“tab”、“空格”時就會出現間隙。
所以方法就是上文提到的，去掉img標簽之間所有的空格，如果又不想把所有連續的行內元素寫到一行，可以多行注釋，把空格回車什么的注釋掉，就像下圖這樣；當連續的行內元素不是img時，也可以通過設置父元素的font-size為0來消除左右間隙。
