vertical-align起作用的前提
vertical-align起作用的前提是元素为inline水平元素或table-cell元素，包括span, img,input, button, td 以及通过display改变了显示水平为inline水平或者table-cell的元素。
这也意味着，默认情况下，div, p等元素设置vertical-align无效。
几个现象
一 图片底部的空白间隙
<div class="wrap">
<img src="3.gif" alt="">XXX
</div>
body{
padding: 0;
margin: 0;
}
.wrap {
background: #249ff1;
}
img{
width: 300px;
}
解决办法：直接子元素上加vertical-align: bottom或middle
body{
padding: 0;
margin: 0;
}
.wrap {
background: #249ff1;
}
img{
width: 300px;
vertical-align: bottom
}
效果图
body{
padding: 0;
margin: 0;
}
.wrap {
background: #249ff1;
}
img{
width: 300px;
vertical-align: middle
}
