img 圖片底部會有白色區域

jackzou 發布于2019-08-01 15:00 / 2766人閱讀

摘要：當對齊的時候下方會有的空隙。解決方法方法一原理通過把標簽改為區塊方法二原理通過把標簽的元素的默認值修改為

原因：

標簽是分成 區塊 和 內聯塊 2種

    一個標簽顯示一行的稱為 區塊，如（段落P，標題H系列，DIV等）    
    若標簽能在一行顯示N個，表明此標簽為 內聯塊，如（,,）
    區塊和內聯塊最大的區別就是，區塊可以設置寬、高、居中對齊等操作，而內聯塊不行

img 標簽 是inline 元素， inline元素默認是baseline對齊的。當baseline對齊的時候 下方會有4px 的空隙。

解決方法：

方法一：display: block;
       原理：通過把img標簽改為區塊
       
方法二：vertical-align: bottom
       原理：通過把img標簽的inline元素的默認值修改為buttom

GPU云服務器云服務器圖片元素img php顯示圖片img html圖片居底部 html 圖片距底部

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

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

關于移動端適配，你必須要知道的

摘要：需要注意，上面的尺寸都是屏幕對角線的長度英寸縮寫為在荷蘭語中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。由于手機尺寸為手機對角線的長度，我們通常使用如下的方法計算的為那它每英寸約含有個物理像素點。導讀移動端適配，是我們在開發中經常會遇到的，這里面可能會遇到非常多的問題： 1px問題 UI圖完美適配方案 iPhoneX適配方案橫屏適配高清屏圖片模糊問題 ... ...

lufficc 2019-08-26 13:48 評論0 收藏0
關于移動端適配，你必須要知道的

摘要：需要注意，上面的尺寸都是屏幕對角線的長度英寸縮寫為在荷蘭語中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。由于手機尺寸為手機對角線的長度，我們通常使用如下的方法計算的為那它每英寸約含有個物理像素點。導讀移動端適配，是我們在開發中經常會遇到的，這里面可能會遇到非常多的問題： 1px問題 UI圖完美適配方案 iPhoneX適配方案橫屏適配高清屏圖片模糊問題 ... ...

IntMain 2019-08-30 10:55 評論0 收藏0
vertical-align 和 line-height | 垂直居中

摘要：垂直居中當設置此時的頁面看似垂直居中，但是并沒有完全垂直居中。中線位置字符的中心并不是字符內容的絕對居中位置。這種通過定高，元素垂直居中的方法不僅適用于現代瀏覽器，連瀏覽器也是支持的。今天在寫樣式時，icon和文字都進行了垂直居中的處理，但是icon并沒有垂直居中，后來發現由于 line-height 和 vertical 一起使用導致與預期樣式不同，特此對 vertical-ali...

ybak 2019-08-30 15:56 評論0 收藏0
VUE實例圖解

摘要：案例品牌列表構建基本結構利用的樣式數據要雙向更新，所以要用到，同時在后面的中要進行初始化為添加按鈕綁定事件的中，綁定值為關鍵字刪除標簽綁定函數，傳入參數的時候，需要用括號事件修飾符，表示阻止默認事件實例對象新建一個實例函數中初始化需要雙向 VUE案例品牌列表構建基本結構利用bootstrap的樣式 showImg(https://segmentfault.com/img/bVbf...

wqj97 2019-08-23 11:27 評論0 收藏0