举个简单例子
结果:
上图红色的那根线就是文字的基线,字母 x 的底部刚好在基线上(基线:小写字母 x 的底部)。line boxes中的vertical-align默认基线对齐,而图片作为其中的一个inline boxes元素,同样也是基线对齐,所以会出现上图的结果。
如何取消空隙呢?
设置vertical-align: top;
设置vertical-align: middle;
设置vertical-align: bottom;
还可以把图片设置为块级元素
img {
display:block;
}