CSS解决图片底部空白缝隙的问题

た入场券 2022-10-25 14:11 167阅读 0赞

**当你将一张图片放在一个盒子里面的时候，如下图，是不是有一点点缝隙：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]  
为什么会有这个缝隙呢？  
因为图片是行内快元素，默认是和文字的基线对齐的。我来演示一下。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]  
是不是刚好给 y 出来的部分呀。那如何去掉空白缝隙呢？  
只要给图片添加vertical-align:bottom或者middle或者top就行啊  
代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
        
                border: 2px solid black;
            }
            img {
        
                vertical-align: bottom;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="1.jpg" alt="">
        </div>
    </body>
    </html>

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]  
改成top或者middle也行的哦~  
其实还可以将图片转为块级元素，因为块级元素就图片自己独占一行，也就没有基线之说了。如下：  
代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
        
                border: 2px solid black;
            }
            img {
        
                display: block;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="1.jpg" alt="">
        </div>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]  
但是有个缺点，就是图片转为块级元素后，图片就独占一行，这在网页布局中不常用哟~  
因此，最好的方法，就是将图片样式添加vertical-align:bottom或者top或者middle之类的哦！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]: /images/20221024/2d556ce3ffae49329c3b041d56bb8266.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]: /images/20221024/6757364a7f574c83b8559ccaaa90334f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]: /images/20221024/0ddc6419176c48f6b6b6540b6548252c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]: /images/20221024/1d56156f5cc348739a3013925bf44470.png