小图标和文字天然对齐（《CSS世界读书笔记》）

之前的理解（错误理解）：

line-height可以实现内联元素的垂直居中效果，所以给span一个与高度相等的行高值，这样图片和文字的“高度”就相等了，文字也自然垂直居中了。

但是这个理解是错误的，这其中其实隐藏了很深的原理：

原理：一个display: inline-block元素，如果里面没有内联元素，或者overflow不是visible，则该元素的基线就是其margin的底边缘；否则其基线就是元素里面最后一行内联元素的基线。

解析：所以说，上述图片中的“禁止图标”垂直方向的对齐基线是图标的下边缘，也就是棕色框的下边缘；而旁边相邻的文字text垂直方向的对齐基线是文本自身的baseline

所以正确的理解应该如下：

所以要利用之前的认知——“line-height”可使文字垂直居中，就必须先将图标和文字的对齐基线调整到一致。

较好的解决方法是：给图标元素一个文字内容，使其不