
image.png
line-hight可以设置字体居中的
背景background的大小和字体大小一样大小的。
line-hight高度大于font-size的高度 所以超过的高度就在两侧平局分配。
字体对齐 :
可以通过vertical-align: top center bottom 还有具体数值进行设置。

image.png

image.png
文字和图片inline 布局 :
图片距离底部有距离, 如何去除

image.png
因为图片默认是以基线对齐 所以我们可以调整图片以底线对齐就可以消除底部距离
第一种修改方式:

image.png
第二种修改方式:
将图片改成 block 块级元素就可以解决,因为块级元素不涉及到与文字对齐的概念。