图片底部会有一点空白，如何去掉它

最新推荐文章于 2025-05-14 15:03:40 发布

原创最新推荐文章于 2025-05-14 15:03:40 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端开发专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种通过调整CSS属性来消除图片底部空白的方法。利用vertical-align:bottom属性，可以确保图片与周围文本或其他元素对齐，从而避免出现不必要的空隙。

由于基线对齐的问题，图片底部会有一点儿空白

给img设置vertical-align:bottom可以解决此问题

CSS:
<style>
    div{
        margin:0;
        padding:0;
        background-color: #ccc;
        font-size: 14px;
        line-height: 1.5em;
    }
    img{
        vertical-align: bottom;
        width:200px;
        height: 200px;
      }
</style>

HTML:
<div>
    <img src="xxx.jpg" alt="">
    <span>Hello</span>
</div>