img等inline元素引发的底部间隙问题

一个经典的现象：

html部分

<div class="content">
  <img class="image" src=".jpg" alt="">
</div>

css部分

.image{
  width: 200px;
}

结果如下

图1

上图可以看到，父元素比图片还多了3~5px的高度，用chrome调试又发现不属于任何的margin和padding。那么，原因何在呢？

根本原因是css 中默认baseline的问题

为了更加具体，我们给图片后面添加文字，代码如下：

html部分

<div class="content">
  <img class="image" src=".jpg" alt=""><span>xyz9</span>
</div>

css部分为：

*{
  padding: 0;
  margin: 0;
}

.content{
  background: orange;
}
.topLogo{
  width: 200px;
  height: 200px;
  background-color: green;
}
span{
  background: red;
}

效果如下：

图2

首先，要知道，CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。 可以看到，vertical-align常见的有4种基线：top、middle、baseline（默认）、bottom

图3

所以，由图3可以理解了图2，默认的对齐baseline对齐方式，导致默认底部有留白。

所以，最直接的修正做法可以是

解法1

*{
  padding: 0;
  margin: 0;
}

.content{
  background: orange;
}
.topLogo{
  width: 200px;
  height: 200px;
  background-color: green;
  vertical-align: bottom; // 把基线对齐方式改成bottom即可
}
span{
  background: red;
}

解法2

网上有这种解法：

*{
  padding: 0;
  margin: 0;
}

.content{
  background: orange;
  line-height: 0; // 设置父元素的line-height为0
}
.topLogo{
  width: 200px;
  height: 200px;
  background-color: green;
}
span{
  background: red;
}

但这种解法有不妥，因为如果content还有子元素比如文字之类的，就会出现：

图4

同理，对父元素设置font-size = 0，也会对文字产生影响

解法3

既然要消除默认baseline的影响，那么让vertical-aling失效即可，所以，考虑让图片变成block;

*{
  padding: 0;
  margin: 0;
}

.content{
  background: orange;
}
.topLogo{
  width: 200px;
  height: 200px;
  background-color: green;
  display: block; // 增加了这行
}
span{
  background: red;
}

图5

可以看到，间隙已经去掉； 不过有产生副作用

本文参考了链接

CSS深入理解vertical-align和line-height的基友关系-张鑫旭

img的间隙

文章如有错误，欢迎随时指出