vertical-align和line-height怎么在css中使用

为什么会出现这种现象呢？

答：原因是行内元素默认都受vertical-align（垂直对齐方式）和line-height（行高）的影响，而vertical-align默认的对齐方式是baseline,即基线对齐。这个基线就是span标签里的字母X的下边沿，故图片底部是与字母底部相对齐的（不是与span标签的背景对齐）。又因为字母本身有line-height（行高）值，所以span标签加上背景后比字母要高一些。

解决方法：（四种方法任意一种都可解决该问题）

（1）、将整个div内的font-size设置为0；

（2）、将图片img变为块级元素，即设置其为display:block;

（3）、给div设置一个行高（值尽量小些），设置为line-height:5px;

（4）、设置图片img垂直对齐方式vertical-align,值为top/middle/bottom任意一个都可以（为了覆盖默认的值baseline）;

效果如下：

完整代码如下：

XML/HTML Code复制内容到剪贴板

1.   

2.   

3.   

4.       

5.       

6.       

7.   

8.   

9.     

     

10.           

11.         xxxxx!  

12.