img元素会撑大父元素的高度

<div class="box">
        <img src="img/head.jpg" alt="" style="width: 200px;height: 200px;">
</div>

此时box的高度总比img的高度要高一点
解决办法:

img{
            vertical-align:middle;
}

具体原理不是很清楚。。。。。。。。。。。。。。