小編給大家分享一下如何解決img標簽之間的間距問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

站在用戶的角度思考問題，與客戶深入溝通，找到薩爾圖網(wǎng)站設計與薩爾圖網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都做網(wǎng)站、網(wǎng)站設計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、空間域名、虛擬主機、企業(yè)郵箱。業(yè)務覆蓋薩爾圖地區(qū)。

img標簽基礎解析在HTML5中img標簽圖片四要素：

（1）src：圖片路徑
（2）width：
（3）height：
（4）alt：

alert的作用:

當圖片發(fā)生錯誤時候，用alt里面的函數(shù)表示錯誤內(nèi)容便于搜索引擎抓取(方便于搜索引擎抓取,方便SEO渲染)

注意事項：

（1）img設置的width和height必須是圖片的原始尺寸
（2）一般inline元素是不能設置寬高，雖然img也是inline元素， 但是它是一個替換元素可以通過src，因此可以自主設置寬高
 

inline元素和內(nèi)聯(lián)元素的差別。

如何解決inline行內(nèi)元素之間的間距問題：

下圖中內(nèi)聯(lián)元素產(chǎn)生上下間隙的原因：

img是個inline元素=>inline元素會默認產(chǎn)生元素代碼中的換行符（也稱為空白符=>也可以默認作為一個文本串）

下圖中內(nèi)聯(lián)元素垂直方向上產(chǎn)生間隙的原因：

內(nèi)聯(lián)元素的默認基線對齊方式導致空節(jié)點出現(xiàn)（vertical-align:baseline;）
什么是基線對齊方式？
作用于垂直，水平方式
什么是空白節(jié)點？
作用于垂直方向上
空白節(jié)點產(chǎn)生的病因：因為img內(nèi)聯(lián)元素在游覽器中可能會被當做字符串看待，可能受到front-size字體大小影響，line-height同時會影響空白節(jié)點=>添加圖片時候下面會多出來一條空白線就是空白節(jié)點的作用

解決方案一：

因為內(nèi)聯(lián)元素被當做字符串看待，因此可以在父級之中加入一個font-size：0；對齊方式變?yōu)椋簐ertical-align：middle； 但是可能造成父級中的文本樣式出現(xiàn)問題

解決方案二：

利用display從行內(nèi)元素變?yōu)閴K級元素：

注意事項： vertical-align和line-height是在css最難理解的兩個知識點拓展：為什么可以改變font-size=0；可以讓img的空白節(jié)點消失

文字和圖片例子：用span標簽和圖片一起

兩個內(nèi)聯(lián)元素對齊方式是vertical-align：baseline；很明顯文字是超過圖片的基線

下圖中改變文字大小，圖片垂直方向上的間隙也隨之變大
 

造成的原因：

文字會有默認的一個行高，造成文字之間垂直上下有間距，文字越大占的間距越大=>當使用“vertical-align: miiddle;”時候文字位置上升就不會產(chǎn)生間距如下圖

以上是“如何解決img標簽之間的間距問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！