解決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
      }
           

快去試試吧