成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS學(xué)習(xí)筆記－圖片img與父元素div之間的間隙解決

Chiclaim / 3056人閱讀

摘要：前言之前在寫網(wǎng)頁的時(shí)候有一個(gè)展示圖片的需求我使用一個(gè)包裹一個(gè)但是在瀏覽器中預(yù)覽的時(shí)候碰到了一下的問題仔細(xì)看圖片和之間有間隙。正文指定了行內(nèi)元素或表格單元格元素的垂直對(duì)齊方式摘錄自。設(shè)置父元素字體大小為所用的值是無單位數(shù)值乘以元素的。

前言

之前在寫網(wǎng)頁的時(shí)候有一個(gè)展示圖片的需求,我使用一個(gè)div包裹一個(gè)img,但是在瀏覽器中預(yù)覽的時(shí)候碰到了一下的問題,

仔細(xì)看,圖片和div之間有間隙。
下面貼上簡易的代碼


        

.content{
    float:left;
    margin:100px auto; 
    background:pink;
}

我外層容器content設(shè)置浮動(dòng),按浮動(dòng)元素會(huì)收縮的原理,本不應(yīng)該出現(xiàn)這條粉色的間隙,但為什么這里會(huì)有呢？之后去網(wǎng)上查了一下,其中涉及到了line-height以及vertical-align的問題。

正文

vertical-align

vertical-align 指定了行內(nèi)（inline）元素或表格單元格（table-cell）元素的垂直對(duì)齊方式(摘錄自MDN)。

vertical-align的取值中有top、middle、baseline、bottom四個(gè)值,他們分別對(duì)應(yīng)了

vertical-align中默認(rèn)值是baseline也就是說圖片的下邊緣其實(shí)是和藍(lán)色那條線對(duì)齊的,而文字元素本身也有高度,所以會(huì)多出那么一部分空白的地方，也就是底部綠色線到藍(lán)色線之間的距離。

那么為什么在沒有文字的情況下圖片也會(huì)有底部的間隙,那是因?yàn)樵贖TML5文檔聲明下，塊狀元素內(nèi)部的內(nèi)聯(lián)元素的行為表現(xiàn)，就好像塊狀元素內(nèi)部還有一個(gè)（更有可能兩個(gè)-前后）看不見摸不著沒有寬度沒有實(shí)體的空白節(jié)點(diǎn)(摘錄自張?chǎng)涡竦牟┛?,所以默認(rèn)vertical-align為baseline的圖片會(huì)和父div之間存在空隙。

知道這一點(diǎn)，現(xiàn)在問題就好解決了，最直接的可以是

設(shè)置img標(biāo)簽的vertical-align
img{
    vertical-align:bottom;//middle和top也都可以
}
設(shè)置img標(biāo)簽display:block

前面正文的開頭說過vertical-align是設(shè)置行內(nèi)（inline）元素或表格單元格（table-cell）元素的垂直對(duì)齊方式,所以設(shè)置img為塊級(jí)元素時(shí)就不會(huì)存在baseline對(duì)齊的問題了。

img{
    display:block
}
設(shè)置父元素div字體大小為0
.content{
    float:left;
    margin:100px auto; 
    background:pink;
    font-size:0px;
}

The used value is this unitless?[
](https://developer.mozilla.org/zh-CN/docs/Web/CSS/number)?multiplied by the element"s font size. The computed value is the same as the specified?
. In most cases?this is the preferred way?to set?line-height
with no unexpected results in case of inheritance.?
**所用的值是無單位數(shù)值[
](https://developer.mozilla.org/zh-CN/docs/Web/CSS/number)乘以元素的font size。計(jì)算出來的值與使用數(shù)值指定的一樣。大多數(shù)情況下，使用這種方法設(shè)置line-height是首選方法，在繼承情況下不會(huì)有異常的值。** (摘錄自MDN)

line-height在不設(shè)置單位時(shí)是通過與font-size相乘來計(jì)算的,設(shè)置font-size為0,line-height也為0,而那一端多余的間隙(baseline和bottom之間的差值)也和line-height有關(guān)，所以自然而然間隙就消除了。

結(jié)尾

這是我解決img與父div空隙中的一點(diǎn)總結(jié),其實(shí)深挖了line-height和vertical-align還有更多的內(nèi)容,我一下子消化不過來,今天先到這里,日后有更深入了解了再慢慢補(bǔ)充,以上內(nèi)容有錯(cuò)誤的地方歡迎小伙伴們來拍磚。

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

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

相關(guān)文章

  • 理解 line-height 和 vertical-align

    摘要：我認(rèn)為應(yīng)該將理解為。如果的值是，高度就是等于。中所有的最高點(diǎn)以及最低點(diǎn)決定了它的高度該計(jì)算包括了的高度，后文會(huì)提到。非替換元素的的，以及并不會(huì)影響高度的計(jì)算。并不是兩條之間的距離。元素的垂直中點(diǎn)位置與父元素的基線加上一半的位置對(duì)齊。 文章 GitHub 地址：https://github.com/afishhhhh/blog/issues/4文章如有錯(cuò)誤，請(qǐng)各位能夠指出。 幾個(gè)概念 ...

    jzzlee 評(píng)論0 收藏0

  • 理解 line-height 和 vertical-align

    摘要：我認(rèn)為應(yīng)該將理解為。如果的值是，高度就是等于。中所有的最高點(diǎn)以及最低點(diǎn)決定了它的高度該計(jì)算包括了的高度，后文會(huì)提到。非替換元素的的，以及并不會(huì)影響高度的計(jì)算。并不是兩條之間的距離。元素的垂直中點(diǎn)位置與父元素的基線加上一半的位置對(duì)齊。 文章 GitHub 地址：https://github.com/afishhhhh/blog/issues/4文章如有錯(cuò)誤，請(qǐng)各位能夠指出。 幾個(gè)概念 ...

    junfeng777 評(píng)論0 收藏0

  • CSS學(xué)習(xí)筆記

    CSS學(xué)習(xí)筆記 在學(xué)習(xí)CSS的過程中做的一些記錄，用于未來的快速回憶。 HTML常見元素和理解 head中的元素 指定字符集 meta name=viewport content=...定義視圖大小與設(shè)備屏幕大小的比例，用戶是否可縮放 指定基準(zhǔn)路徑 body中的元素 a[href, target] img[src, alt] table td[colspan, rowspan] for...

    bawn 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<