当块级标签（如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；