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

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

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

問題描述

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

//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元素后面會(huì)跟一個(gè)空白符，會(huì)使它的高度多出3px
至于為什么img元素后面會(huì)出現(xiàn)3px的空白呢～？因?yàn)?b>img元素是行內(nèi)元素，行內(nèi)元素默認(rèn)會(huì)有3px的間距。因此當(dāng)我們的塊級(jí)元素div包含這個(gè)行內(nèi)元素的時(shí)候底部就出現(xiàn)了3px的間距。感謝@夢(mèng)雨依依！

解決方案

設(shè)置img為display:block,空白就消失啦～～～
因?yàn)閷mg元素設(shè)置為塊級(jí)元素，就不會(huì)存在默認(rèn)間距了。
更多解決方案請(qǐng)參考

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/113496.html

相關(guān)文章

讀后總結(jié)--精通css高級(jí)web標(biāo)準(zhǔn)解決方案（第二版）

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

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

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

yankeys 2019-08-29 15:10 評(píng)論0 收藏0
淺析RWD

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

0x584a 2019-08-30 12:52 評(píng)論0 收藏0
淺析RWD

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

_Dreams 2019-08-01 15:10 評(píng)論0 收藏0
再次認(rèn)識(shí) vertical-align

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

William_Sang 2019-08-30 13:11 評(píng)論0 收藏0