如何解決img標簽之間的間距問題

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

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

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

alert的作用:

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

注意事項：

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

inline元素和內聯元素的差別。

如何解決inline行內元素之間的間距問題：

下圖中內聯元素產生上下間隙的原因：

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

下圖中內聯元素垂直方向上產生間隙的原因：

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

解決方案一：

因為內聯元素被當做字符串看待，因此可以在父級之中加入一個font-size：0；對齊方式變為：vertical-align：middle； 但是可能造成父級中的文本樣式出現問題

解決方案二：

利用display從行內元素變為塊級元素：

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

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

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

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

造成的原因：

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

以上是“如何解決img標簽之間的間距問題”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！