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

newsning 發布于2019-08-29 15:42 / 2821人閱讀

摘要：問題描述寫的時候遇到了一個小問題只包含一個元素，但是頁面展示上卻比高出一點。因此當我們的塊級元素包含這個行內元素的時候底部就出現了的間距。

問題描述

寫css的時候遇到了一個小問題div只包含一個img元素，但是頁面展示上div卻比img高出一點。當時只覺得匪夷所思...找了半天自己樣式的問題...情況如下圖

//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元素設置為塊級元素，就不會存在默認間距了。
更多解決方案請參考

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113496.html

讀后總結--精通css高級web標準解決方案（第二版）

摘要：無論是否移動，元素仍然占據原來的空間。絕對定位絕對定位使元素的位置與文檔流無關，因此不占據空間。為啥讀這本書現在前端圈子過于浮躁，掌握基礎無疑比掌握一個js框架重要 css怎么都能寫出來，但是要寫的好寫得快還得多讀書 css魔法推薦的，讀完這個讀讀css揭秘當然，根本原因還是覺得自己掌握不好開始總結吧~ 一. 基礎知識經過上世紀沒有 css的痛苦時的混沌時期，人們開始了進...

leone 2019-08-30 13:05 評論0 收藏0
【前端Talkking】CSS系列——CSS深入理解之float浮動

摘要：包裹性所謂包裹性，其實是由包裹和自適應兩部分組成。官方對屬性的解釋是元素盒子的邊不能和前面的浮動元素相鄰。清除高度塌陷的問題在上面的章節中，如果子元素設置浮動屬性，則父元素就會出現高度塌陷的問題。 float屬性是CSS中常用的一個屬性，在實際工作中使用的非常多，如果使用不當就會出現意料之外的效果。雖然很多人說浮動會用就行、浮動過時了，但是對于優秀的前端開發人員，需要有刨根問底的精神，...

yankeys 2019-08-29 15:10 評論0 收藏0
淺析RWD

摘要：三響應式網頁設計的基本原理標簽，允許頁面寬度自動調整大多數移動瀏覽器將頁面放大為寬的視圖以符合屏幕分辨率。解決方案使用，選擇器清除浮動，只適用于非瀏覽器。由于移動設備屏幕大小的限制，在其上進行顯示的內容一般是經過精心篩選的。一、前言現今，無論是移動設備、平板電腦、PC，屏幕大小各不相同，若是針對每個屏幕大小單獨設計一個解決方案，則會大幅增加網站建設的復雜程度和運營成本。響應式網頁設...

0x584a 2019-08-30 12:52 評論0 收藏0
淺析RWD

摘要：三響應式網頁設計的基本原理標簽，允許頁面寬度自動調整大多數移動瀏覽器將頁面放大為寬的視圖以符合屏幕分辨率。解決方案使用，選擇器清除浮動，只適用于非瀏覽器。由于移動設備屏幕大小的限制，在其上進行顯示的內容一般是經過精心篩選的。一、前言現今，無論是移動設備、平板電腦、PC，屏幕大小各不相同，若是針對每個屏幕大小單獨設計一個解決方案，則會大幅增加網站建設的復雜程度和運營成本。響應式網頁設...

_Dreams 2019-08-01 15:10 評論0 收藏0
再次認識 vertical-align

摘要：因為第三格的距離還是存在，也就能理解之前的有一種解決方案，如果中不存在文本，直接設置。單元格垂直居中。單元格的內邊距的下邊緣與行的底端對齊。 css中的基礎知識，上次在刷 segmentfault 遇見了一個相關的問題有再次看過 vertical-align 的描述。今天自己也遇見一個類似的問題，再次深入學習一下。 vertical-align 用來指定行內元素（inline）或表格...

William_Sang 2019-08-30 13:11 評論0 收藏0