块级标签包含行内标签底部出现3px间隔的解决办法

当块级标签（如div）内包含了行内标签（如img），则外层元素与内层元素底部会出现3px的间隔；

代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            background: red;
        }
    </style>
</head>
<body>
    <div id='box'>
        <img src="test.png">
    </div>
</body>
</html>

显示效果如下：

解决办法有三种：

　　1.设置div{ font-size: 0}；将外层块级标签的font-size设置为0；

　　2.设置img{ display: block};将内层行内标签的display设置为block，将其变为块级标签；

　　3.设置img{ vertical-align:top;}；将内层行内标签的vertical-align设置为top；

 

posted @ 2016-08-23 16:48  hello八戒  阅读(1030)  评论(0)  编辑  收藏  举报