图片底部默认有空白缝隙bug的解决方案

鸭绒

于 2020-07-11 14:55:50 发布

阅读量698

点赞数 2

CC 4.0 BY-SA版权

分类专栏：布局效果 bug的解决方案文章标签： css3 css 前端小程序

本文链接：https://blog.csdn.net/weixin_43334673/article/details/107284519

本文探讨了图片底部出现空白缝隙的CSS问题，原因是行内块元素与文字基线对齐。通过调整图片的垂直对齐方式，例如设置`vertical-align: top`或`bottom`，可以成功消除这一bug。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- - 1.指出bug
  - 2.解决bug

1.指出bug

bug描述：我们通常会在一个容器中包裹着一张图片，但是图片下面默认会有一个空白缝隙。

原因：行内块元素会和文字的基线对齐。

我们来看看这个bug:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>精灵图</title>

最低0.47元/天解锁文章

200万优质内容无限畅学