a巢狀img標籤的問題

2021-09-26 06:06:06 字數 572 閱讀 7707

html結構是這樣的,未使用任何樣式!

但在chrome的開發者工具中檢視,a的高度並不是影象的高度,而是乙個很奇怪的高度。

這是什麼原因,如何讓a標籤的高度與img標籤的高度一樣

[標籤為什麼會有底下的空白呢?這你要理解所謂的「基線(baseline)」。這是乙個英文排版概念。我這裡還是引用下知乎人的鏈結吧! 講得很周到!]

總結這個問題的幾種解法:

[a]處理基線

a

img

[b]強行去掉標籤的行高

a
[c]沒有設定行高的時候可以去掉字型大小;

a

IMG標籤的間距問題

問題 包含img標籤的div之間有間距 垂直方向上有間距 在這裡插入描述 原因 塊級元素包含內聯元素如文字等時,內聯元素預設是和父級元素的baseline 基線 對齊的,而baseline又和父級元素底邊有一定的距離 這個距離和 font 有關,不一定是5px 所以與父元素的底邊有距離。解決方法 1...

解決img標籤間距問題

關於img標籤間距問題 多個img之間有間距,包含img標籤的div之間有間距。如下 1 doctype html 2 3 4 5 testtitle 6 7 head 8 9 10 11 12 13 div 14 15 16 17 18 div 19 20 21 22 23 div 24 body...

img標籤的運用

網頁中常見的影象格式大體上有三種,jpg,gif和png 有失真壓縮,色彩豐富,隱藏一些無用的資訊,只保留有用的部分。簡單動畫,背景透明。無失真壓縮,透明,交錯,動畫 使用img標籤,此標籤單獨出現 alt 的替換文字,當無法開啟時,網頁會自動顯示alt的內容來代替 1 html 2 head ti...