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

newsning 發(fā)布于2019-08-29 15:42 / 2829人閱讀

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

問題描述

寫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);
    }
  }

問題原因

后來查了一下資料，發(fā)現(xiàn)img元素后面會跟一個空白符，會使它的高度多出3px
至于為什么img元素后面會出現(xiàn)3px的空白呢～？因為img元素是行內(nèi)元素，行內(nèi)元素默認會有3px的間距。因此當我們的塊級元素div包含這個行內(nèi)元素的時候底部就出現(xiàn)了3px的間距。感謝@夢雨依依！

解決方案

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

GPU云服務器云服務器 div的高度 div添加元素的js 分別建立包含10個數(shù)據(jù)元素的順序線性表和鏈式線性表圖片元素img

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113496.html

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

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

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

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

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

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

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

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

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

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

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