为什么图片下面有一段空白部分？

原创已于 2024-03-27 10:38:21 修改 · 590 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css

于 2024-03-27 10:35:59 首次发布

css 专栏收录该内容

2 篇文章

订阅专栏

问题场景

下面举个例子代码：里面用到了一个获取随机图片的网址，有兴趣可以看一下跳伞

<!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>
        .img-item {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="img-item">
        <img src="https://picsum.photos/200" alt="img">
    </div>
</body>

</html>

图片宽高都是200像素，但是下边多出来了一块空白
效果展示

问题原因

是一个样式属性影响的：vertical-align，这个属性默认是baseline，基线对齐，通俗易懂的解释，就是有一些英文字母，例如g，在三线格上书写时：
效果展示
下面会露出一截，为了这个在处理样式的时候，就留出来一部分空间展示类似的字母，找到问题就知道怎么解决了

问题解决

给img设置vertical-align: middle;就好了，其实只要不是baseline都行

<!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>
        .img-item {
            border: 1px solid #000;
        }

        img {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="img-item">
        <img src="https://picsum.photos/200" alt="img">
    </div>
</body>

</html>