关于div层的间隙, 还有img与div的间隙
*{
padding: 0px;
margin: 0px;
}
.test{
border: 1px solid red;
width: 600px;
}
<div class="test">
<img src="test.jpg" />
</div>
img与div之间存在着一个间隙，这个间隙是怎么产生的？应该怎么解决？下面我们一点点的探寻这个问题背后的一些原理：
baseline只是在内联元素中才有的概念，在块元素中并没有这种概念，也就是说只有在ifc下才会有这一概念，并且内联元素的vertical-align的默认值就为baseline，也就是根据基线对齐。
对应着baseline还有两条标准线，分别为bottom和top，下面这张图说明了三条线所处的位置：
img是一内联元素，其根据baseline对齐，那条间隙就是baseline到bottom的距离，既然现在问题搞清楚了，下面就来解决它：
解决问题：
解决这个问题有4种方法（欢迎大家补充，我只想到这4种）：
.line-height
给div.test添加样式line-height: 0px;就可以解决这个问题，这个原理很简单，因为line-height指的是bottom到top的距离，将其设置为0也就是代表着baseline与bottom之间的距离为0，自然那条间隙就消失啦；同理我们可以得出的就是指定font-size: 0px;也是可以解决，因为line-height在不指定时值默认为font-size * 一个系数(1.2 or other)，但是这种情况下不能有文字出现。
.img变成块元素
文章前部分讲到了baseline只是对于内联元素而言，自己的给img添加样式display: block;将其转为块元素自然间隙就会消失，不过这样也会产生一些副作用。
.给div.test添加height
这种方式比较简单那就让div.test只有图片那么高，这样也会有副作用，文字可能会移除
.改变vertical-align
改变垂直对齐方式，比如指定vertical-align: bottomorvertical-align: toporvertical-align: middle，可以很完美的解决这个问题。
其他解决方法 找到上面的div中的图片代码所在位置，为其设定属性style="display:block"，问题解决。
或者img下边有div（中有图片）设置img（div上面的object）其设定属性style="display:block"，问题ok。
display:block 意思是：让对象成为块级元素(比如a，span等)。
一般的块级元素诸如段落<p>、标题<h1><h2>...、列 表<uL><ol><dl> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。
而内联元素 则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........
块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。