解决img和div之间的间距问题

昨天慧慧和大家探讨了图片与图片之间（行内元素与行内元素之间）因为代码换行而产生的间距问题的解决方案，今天我们继续来深究页面引入图片带来的另外一个问题，图片与div之间的间距

    *{
      	margin:0;
      	padding:0;
      }
      p{
      	width: 316px;
      	height: 50px;
      	background-color: red
      }

   <img src="../img/hh_31.jpg" alt="">
    <div></div>

结果如下

细心的小伙伴会发现，图片与div之间又一个很魔性的间距，那怎么解决这个bug呢？给图片加个属性vertical-align: top ,这个问题就迎刃而解了

    *{
      	margin:0;
      	padding:0;
      }
     img{ vertical-align: top }
      p{
      	width: 316px;
      	height: 50px;
      	background-color: red
      }

快去试试吧