css img神奇的缝隙

<div class="wrap">
    <img src="a.jpg" alt="">dragaasdf
    <div class="rect"></div>
  </div>

.wrap {
  font-size: 100px;
}

.rect {
  width:500px;height:200px;background: #ff0;
}

原因是图片的默认样式是 ​​vertical-align: baseline​​ 基线对齐，图片与文字基线对齐，例如g字母

解决：

img {
 vertical-align: bottom; /*or top| or display: block*/
}