<div class="line3"> <img src="../../../assets/css_mindgraphy.png" width="100"> </div>
于是我们发现图片的下面出现了一点间隙，针对这种情况，vertical-align就可以出场了，只要将vertical-align设置为除默认值之外的位置值就可以了。
.line3 > img { vertical-align: top;
}
可以看到图片下面的间隙没有了，当然这里除了使用vertical-align以外，还可以设置line-height: 0、font-size: 0都能去解决这个问题。原因就在于上面说到strut， 图片是内联元素，因此其也存在一个看不见的文本节点，相当于这样
噢~这样就知道应该是默认的行高起的作用，对了，还有vertical-align的作用，因为其默认值是baseline也就是基线对齐，可以看到图片底部可以文本的底部对齐了，那么当设置vertical-align: top、line-height: 0或者font-size: 0，前者相当于将基线对齐变成了顶部对齐，自然不会出现下面的间隙了，后两者则是将行高去掉，另外则是隐藏了文本大小，那么自然间隙也都不存在了。
除此之外，我们还有一种方法能够解决这个问题，就是直接改变图片的display值，将其设置为块级元素，那么上面所说的空白节点strut自然就不存在了，也能解决这个问题。不过这里改变了display值，可能会影响到布局，所以还是推荐使用上面几种办法。
vertical-align除了设置位置值，也就是除了top，middle，bottom这些关键字，还可以设置具体的数值，百分数，也可以设置负数值，负数值其实就是向下偏移指定的值，百分数就是相对line-height的值设定。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
css