图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的。所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.wrapper {
font-size: 0;
}
.inner {
display: inline-block;
}
img {
width: 100px;
height: 100px;
}
.test {
font-size: 16px;
}
.img {
vertical-align: top;
}
</style>
<body>
<div class="wrapper">
<div class="inner img">
<img src="1.jpg" alt="">
</div>
<div class="inner">
<p class="test">Lorem ipsum dolor sit amet </p>
</div>
</div>
</body>
</html>
