div盒子使用<img>标签高出img元素解决方案

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

在写图片链接时，遇到的一个有趣的问题，在这里分享一下解决方法和原因。

问题重现：

css代码:

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        min-height: 100vh;
        background-color: yellow;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      div {
        border: 1px solid #000;
        overflow: hidden;
      }
      a {
        border: 1px solid #000;
        overflow: hidden;
      }
      img {
        height: 100px;
        width: 100px;
      }

html代码:

    <div>
      <img
        src="https://raw.githubusercontent.com/fafa123hua/img-folder/master/010%E6%B0%B4%E6%BB%B4.png"
      />
    </div>
    <a
      ><img
        src="https://raw.githubusercontent.com/fafa123hua/img-folder/master/010%E6%B0%B4%E6%BB%B4.png"
    /></a>
  </body>

如图所示，当div盒子(a标签也是)的高度是由img的高度撑开时，就会出现div盒子的高会比本身img元素高出一点点的情况，出现这种情况的原因是img标签有个预设元素是vertical-align，它的值是baseline，根据产生条件和原因有以下几个解决方案。

解决方案

1 给父盒子高度

直接从源头解决给个高完事了。

      div {
        border: 1px solid #000;
        overflow: hidden;
        height: 100px;
      }

2 控制文本元素

设置font-size或者line-heigth为0，让文本元素没有空间自然就没有多余位置。

      div {
        border: 1px solid #000;
        overflow: hidden;
        line-height: 0;
        /* font-size: 0; */
      }

3 修改元素类型

将img改为块级元素。

      img {
        height: 100px;
        width: 100px;
        display: block;
      }

4 修改预设元素

修改img的预设元素vertical-align值，改为其他。

      img {
        height: 100px;
        width: 100px;
        vertical-align: middle;
      }