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

為沈陽等地區(qū)用戶提供了全套網頁設計制作服務，及沈陽網站建設行業(yè)解決方案。主營業(yè)務為網站設計、成都做網站、沈陽網站設計，以傳統(tǒng)方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

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

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

alert的作用:

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

注意事項：

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

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

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

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

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

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

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

解決方案一：

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

解決方案二：

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

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

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

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

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

造成的原因：

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

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

文章標題：如何解決img標簽之間的間距問題-創(chuàng)新互聯(lián)
標題鏈接：http://www.rwnh.cn/article10/copego.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供手機網站建設、網站營銷、虛擬主機、網站內鏈、云服務器、網站排名

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)