图片低测空白缝隙解决方案

最新推荐文章于 2022-01-30 23:15:10 发布

芒果水蜜桃

最新推荐文章于 2022-01-30 23:15:10 发布

阅读量117

点赞数

分类专栏：前端学习笔记文章标签： javascript css css3

本文链接：https://blog.csdn.net/Meng19986082304/article/details/121076375

版权

前端学习笔记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

在这里插入图片描述 bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法两种：
1.给图片添加vertical-align：middle | top | bottom；等（提倡使用）
2.把图片转换为块级元素。display：block；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片底部空白缝隙解决方案</title>
  <style>
    div {
      border: 2px solid red;
    }

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

<body>
  <div>
    <img src="./ad-r.png" alt="">我是爸爸
  </div>

</body>

</html>