您現在的位置: 365建站網 > 365學習 > div line-height 導致 img 與 div 存在空隙的解決方法

div line-height 導致 img 與 div 存在空隙的解決方法

文章來源:365jz.com     點擊數:183    更新時間:2021-02-01 11:57   參與評論

div line-height 導致 img 與 div 存在空隙的解決方法


一、問題

1.png

像是上面這個圖,就很明顯的問題,圖片放在div中,但是下方會出現一個白框。雖然圖片使用的是

img{
    width:100%;
    height:100%;}

但是仍舊存在這個問題。


二、問題產生的原因

最直接的原因就是 img 是行內元素,而其vertical-align方式默認是 baseline

div本身是有line-height的,baseline對其方式導致圖片并不是與div的真實底部對其,而是文基線。

所謂的基線底部不包括 line-height 的空白顯示部分

2.png

基線對齊導致圖片總是和div下邊緣有一段空隙,而 line-height 同樣表現在行內元素的 img 上,因此即使沒有文字,圖片也存在一個 line-height 的影響。


三、解決


1、display:block

最直接的辦法肯定是將 img 作為 block 來處理,就不存在line-height的影響了。

3.png

但是將 img 作為 block 處理,會導致文字換行,因此這個方式有些時候并不適用,如果只有圖片的話, 那就可以直接來設置。


2、 vertical-align:bottom;

既然是因為 vertical-align:baseline 存在問題,那將其改變,不適用默認對其。

底部對其可以直接使用 vertical-align:bottom

4.png


3、 line-height:0;

上面提到div的line-height會影響行內元素,因此,如果需要將圖片和文字都基于底部對其,則使用

div{
    line-height:0;}

即可

5.png


CSS設置span和img垂直居中(設置line-height失效):

我要實現下圖的樣子,幣種和旗子都是垂直居中,方法很簡單,給img設置vertical-align:middle.在父容器上設置上line-height,效果如下

要實現span垂直居中,代碼如下:

<style>
     .flag{
          position: absolute;
          bottom: 0;
          width: 23rem;
          height: 2.5rem;
          line-height: 2.5rem;
      }
      .flag img{
          width: 1.58rem;
          height: 2.1rem;
          vertical-align: middle;
      }
</style>


<div class="flag">
       <img src="./img/flag.png">              
       <span>幣種:...</span>
</div>

解釋一下這么寫的原因:

img是行內元素,會帶有默認樣式vertical-align:baseline

vertical-align是指定行內元素(inline)垂直對齊方式的(目前只有圖片支持vertical-align屬性,默認屬性值是baseline,所以會導致圖片產生一個3px左右的下邊距,解決方法就是給vertical-align設置非baseline的內容)

官網解釋vertical-align:baseline,使元素的基線與父元素的基線對齊;

父元素的基線,實際上解釋的比較模糊,我的理解是父元素基線在父容器底部附近,但是還沒有完全到底;

我理解的:設置baseline的元素會影響周邊行內元素,讓baseline元素和周邊元素都處于容器底部偏上一點點的基線位置

所以會出現這種情況,幣種位于底部,即使設置了line-height也無法是幣種垂直居中

解決方法:給旗子設置vertical-align:middle讓旗子垂直居中,然后給父容器設置line-height讓幣種垂直居中


如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇

您可能感興趣的文章:


發表評論 (183人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 免费观看四虎精品国产| 勿忘我视频在线观看免费| 国产免费AV片在线观看| 特级毛片打开直接看| gogo大胆全球裸xxxx| 亚洲无码电影| 日本熟妇色在线视频| 国产午夜理论片不卡| 乱子伦农村xxxx| 男男同志18vidos| 成年网站未满十八禁在线观看| 精品偷拍偷窥在线视频| 亚洲男男同人啪啪拍网站| 护士奶头又大又软又好摸| 日日摸夜夜添夜夜添破第一次| 爱情岛av永久网址| 特级欧美aa毛片免费观看| 免费人成动漫在线观看播放| 被几个人绑起来玩到高潮| 日本黄色片| 贞洁美妇沦陷| 老汉玩儿熄| 欧美老熟肥妇ass| 无码人妻一区二区三区兔费| 国产免费av片在线观看下载| 永久不封国产av毛片| 国产女人| av天堂影院首页| chinaboy亚洲solo| 在线观看视频a免播放器| 国产在线精品一区二区三区| http://www.yuho-dance.com