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

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

代码如下：

doctype html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    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；