如何解决div中img图片下方空白问题

在线演示代码：http://codepen.io/Tom_chao/pen/dNBbKL

CSS代码：

div{
  border:1px solid red;
  display:inline-block;
}
div img{
  width:300px;
}

JavaScript代码：

var btn = document.getElementById('btn');
var img = document.querySelector('img');
btn.onclick = function(){
  img.style.display = 'block';
  //img.style.verticalAlign = 'middle';
}

可以看到点击之前，div中图片下方有一个大约3px高的空白区域。解决办法有两个：第一，就是改变图片的display属性值。效果如上所示。第二个方法，就是设置图片的垂直对齐方式，效果如下：

很显然，第二种方法会影响周围文字的布局显示，当然也可以解决，不过我通常使用第一种方法。