解決img標籤與其它標籤間隙問題？

weixin_33861800發表於2018-03-10

解決img標籤間距問題

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

程式碼如下：

<!DOCTYPE html>
<html>

    <head>
        <style>
            *{
                margin: 0;padding: 0;
            }
            .content-wrapper{
                padding: 30px;
                height: 100px;
                background-color: black;
                color: white;
            }
            .avatar{
                display: inline-block;
            }
            .avatar img{
                width: 60px;
                height: 70px;
            }
            .content{
                display: inline-block;
                
                
            }
            .brand{
                font-size: 12px;
                display: block;
            }
        </style>
    </head>

    <body>

        <div class="content-wrapper">
            <div class="avatar">
                <img src="1.jpeg">
            </div>
            <div class="content">
                <span class="brand">前端小智</span>
                <span class="brand">前端愛好者</span>
                <span class="brand">終身學習者</span>
            </div>
        </div>
    </body>

</html>
複製程式碼

效果圖如下：

從效果圖片可以看出圖片與span標籤有間隙

產生原因是由於html裡面有空白字元引起的.

既然知道了是空白字元引起的，注意空白字元也是文字的內容，所以我們可以用以下方法解決:

如上圖，我們可以在父親視窗上設定字型大小 為0， 然後在對應的子視窗設定字型就可以清除空隙了，

最終效果如下:

img標籤與img標籤之間也會間隙，同理設定父親視窗上設定字型大小 為0， 然後在對應的子視窗設定字型就可以啦

願你成為終身學習者

相關文章