解決圖片間間距的幾種方法

當我們使用多個img標簽時就會遇到img自帶間距的問題如下

解決這個問題很多種方法，下面來簡單說一下

1.如果只想解決解決豎向的間距 只需用vertical-align這個屬性就可以了

img{
        
        vertical-align: top;
    }

或者給img標簽的父元素加上line-height屬性

div{
   
        line-height: 0;
    }

如果圖片很寬一個就占一行的畫，比如移動端的長圖，給圖片加display:block;就可以了；

2.如果只想解決左右的間距問當然可以把四周的間距都取消，然后加margin或者padding，但在網上發行有朋友在img標簽左右加上注釋包裹，親測有效果

 <img src="./temimage.jpg" alt=""><!--
        --><img src="./temimage.jpg" alt=""><!--
        --><img src="./temimage.jpg" alt=""><!--
        --><img src="./temimage.jpg" alt=""><!--
        --><img src="./temimage.jpg" alt=""><!--
       --><img src="./temimage.jpg" alt=""><!--
       --><img src="./temimage.jpg" alt=""><!--
       --><img src="./temimage.jpg" alt="">

或者將所有標簽並排寫，這種寫法顏值太低了，也不易讀不推薦了

<img src="./temimage.jpg" alt=""><img src="./temimage.jpg" alt=""><img src="./temimage.jpg" alt="">

3.最后當然就是清除全部 的間距了

　　可以給圖片加上浮動屬性

img{
        float: left;
        
    }

　　可以給父元素加上font-size

div{
    
        font-size:0;
       
    }//font-size如果給值的話圖片的間距就會變成這個值，所以要個加文本的時候就要單獨定義文本的font-size了

　　父元素用flex，

div{
        display: flex;
        flex-wrap: wrap;
       
       
    }