CSS-a标签内img和底部有间隔的问题

最新推荐文章于 2022-03-04 14:32:31 发布

小爱丨同学

最新推荐文章于 2022-03-04 14:32:31 发布

阅读量307

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_44165263/article/details/120318919

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

博客探讨了CSS中img元素与a标签底部存在间隔的原因，该问题源于img元素作为行内元素默认的基线对齐方式。解决方法是通过设置img元素的vertical-align属性为bottom，确保元素底部对齐，从而消除间隔。示例代码展示了问题及修正后的效果。

摘要由CSDN通过智能技术生成

CSS的基线
详细信息可以参考
https://www.zhangxinxu.com/wordpress/2010/05/%e6%88%91%e5%af%b9css-vertical-align%e7%9a%84%e4%b8%80%e4%ba%9b%e7%90%86%e8%a7%a3%e4%b8%8e%e8%ae%a4%e8%af%86%ef%bc%88%e4%b8%80%ef%bc%89/
a标签内img和底部有间隔的问题
以下是一个很正常的写法，但是打开开发者工具我们会发现，img高度为30px，但是a标签高度为34px。
原因在于，img为行内元素，默认的对齐方式为baseline，在基线和底部之间还有一段距离。
给img元素添加vertical-align: bottom即可解决问题。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    img {
      width: 50px;
      height: 30px;
      background-color: chocolate;
      object-fit: contain;
    }
    a {
      display: inline-block;
    }
  </style>
</head>
<body>
  <a>
    <img>
  </a>
</body>
</html>

小爱丨同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-a标签内img和底部有间隔的问题

CSS的基线详细信息可以参考https://www.zhangxinxu.com/wordpress/2010/05/%e6%88%91%e5%af%b9css-vertical-align%e7%9a%84%e4%b8%80%e4%ba%9b%e7%90%86%e8%a7%a3%e4%b8%8e%e8%ae%a4%e8%af%86%ef%bc%88%e4%b8%80%ef%bc%89/a标签内img和底部有间隔的问题以下是一个很正常的写法，但是打开开发者工具我们会发现，img高度为30px，但是.
复制链接

扫一扫

专栏目录