当块级标签(如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;










