div高度比包含的img元素高出3px的問題

問題描述

寫css的時候遇到了一個小問題 div只包含一個 img元素，可是頁面展現上 div卻比 img高出一點。當時只以爲匪夷所思...找了半天本身樣式的問題...狀況以下圖

<!-- html部分 -->
      <div class="header-pic">
        <img class="" :src='headPic' />
        <div class="linear-bg"></div>
      </div>

//less代碼
  .header-pic {
    position: relative;
    border-radius: 10px 10px 0px 0px;
    width: 100%;
    
    img {
      width: 100%;
      background-size: cover;
    }
    .linear-bg {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 100%;
      background: rgba(51,51,51,0.10);
    }
  }

問題緣由

後來查了一下資料，發現 img元素後面會跟一個空白符，會使它的高度多出3px
至於爲何img元素後面會出現3px的空白呢～？由於 img元素是行內元素，行內元素默認會有3px的間距。所以當咱們的塊級元素 div包含這個行內元素的時候底部就出現了3px的間距。感謝@夢雨依依！

解決方案

設置 img爲 display:block,空白就消失啦～～～
由於將img元素設置爲塊級元素，就不會存在默認間距了。
更多解決方案請參考