img標籤間距問題

時間 2019-11-18

標籤 img 標籤間距問題欄目 HTML 简体版

原文原文鏈接

關於img標籤間距問題：多個img之間有間距，包含img標籤的div之間有間距。css

 <!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>

谷歌瀏覽器效果：html

火狐瀏覽器效果：瀏覽器

　　咱們發現，不一樣div之間，上下有空白間隙，不一樣img之間，左右有間隙，並且，不一樣瀏覽器的左右間隙大小不一樣。學習

　　經學習，個人解決辦法是，同一個div下不一樣img標籤之間不要留空格，並給img的父元素div標籤加上屬性font-size:0。這樣一來，全部的圖片就可以無縫拼接了。字體

下面來講一下爲何這樣作能夠解決問題。spa

　　塊級元素包含內聯元素如圖片文字等時，內聯元素默認是和父級元素的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"）。code

　　知道了問題產生的緣由，就好對症下藥解決問題了，其實就是要消除baseline對齊方式產生的距離。htm

　　因此方法一，很容易想到，把對齊方式改一下不就行了，因而設置img的vertical-align屬性爲bottom；blog

　　方法二就是上文說的給父元素加上font-size:0的屬性，既然這個距離和font有關，那麼把字體大小設爲0，總該沒有距離了吧；圖片

　　方法三可由方法二想到，既然爲0能夠，那把行高設的很小可不能夠呢？經試驗發現，本例圖片大小爲200px，設line-height不大於12就可以消除間隙了，鑑於這個距離通常是5px，因此能夠把line-height設爲5px左右；

　　另一個間隙是多個img標籤的左右間隙，是因爲img標籤是行內元素，而事實是當行內元素之間有「回車」、「tab」、「空格」時就會出現間隙。

　　因此方法就是上文提到的，去掉img標籤之間全部的空格，若是又不想把全部連續的行內元素寫到一行，能夠多行註釋，把空格回車什麼的註釋掉，就像下圖這樣；當連續的行內元素不是img時，也能夠經過設置父元素的font-size爲0來消除左右間隙。

轉自：http://www.cnblogs.com/lovelyun/p/4846222.html