為什麼標籤下面有空白

2021-06-23 08:24:44 字數 779 閱讀 6691

要理解這個問題,首先要弄明白css對於 display: inline 元素的 vertical-align 各個值的含義。vertical-align 的預設值是 baseline,這是乙個西文排版才有的概念:

對比一下 vertical-align 的另外兩個常見值,top 和 bottom:

可以看到,baseline 和 bottom 之間有一定的距離。實際上,inline 的下面那一道空白正是 baseline 和 bottom 之間的這段距離。即使只有沒有文字,只要是 inline 的這段空白都會存在。

到這裡就比較明顯了,要去掉這段空白,最直接的辦法是將的 vertical-align 設定為其他值。如果在同一行裡有文字混排的話,那應該是用 bottom 或是 middle 比較好。

另外,top 和 bottom 之間的值即為 line-height。假如把 line-height 設定為0,那麼 baseline 與 bottom 之間的距離也變為0,那道空白也就不見了。如果沒有設定 line-height,line-height 的預設值是基於 font-size 的,視渲染引擎有所不同,但一般是乘以乙個係數(比如1.2)。因此,在沒有設定 line-height 的情況下把 font-size 設為0也可以達到同樣的效果。當然,這樣做的後果就是不能**混排了。

解決img標籤下面的小空隙

很多初學小夥伴在寫頁面的時候碰到過乙個問題,當我們用乙個div直接包裹img,img的下方會出現3px間距,如圖 原因 img是一種類似text的標籤元素,在結束的時候,會在末尾加上乙個空白符 匿名文字 導致下方會多出來 3px 間距,其實我們在img右側新增乙個span包裹住文字,現象會更明顯 解...

第七題 下面程式輸出什麼?為什麼?

如題 int main printf d n strlen a return0 此題第乙個是編譯錯誤,const修飾的變數是唯讀變數,而不是我們翻譯的常量 也就是說size還是變數,只是編譯器在編譯時從語法的層面不要它作為左值,但是這改變不了它變數的本質 大家想想陣列定義時一定不能用變數做下標吧 把...

為什麼RFID標籤應用廣泛

為什麼rfid標籤應用廣泛?隨著rfid技術的發展,rfid的應用已經涉及我們生活的方方面面,比如商場的貨物管理 防偽溯源等。rfid標籤的應用優勢 2 資料容量大 資料容量最大的二維條形碼,最多也只能儲存2725個數字 若包含字母,儲存量則會更少 rfid標籤則可以根據使用者的需要擴充到數十k。3...