示例新建一个test.html文件,内容如下:

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
<div style="background-color:green;position:absolute;">
<img  style="background-color:yellow" src="http://m.baidu.com/static/index/plus/plus_logo.png">
</div>
</body>
</html>

可以看到, img的下面总有3px 的底边,这是怎么回事呢?
原来, img也是被当做普通的text进行对齐,下面3px的底边是留给如g,j,y等向下戳出来的字母的. 也就是默认有这个css属性 vertical-align: baseline;
为img添加属性vertical-align: middle就可以解决这个问题.

标签: none 阅读量: 928

添加新评论