[問題] 有關 vertical-align

看板Web_Design作者 (4545454554)時間11月前 (2023/07/20 21:17), 11月前編輯推噓1(104)
留言5則, 2人參與, 11月前最新討論串1/1
各位好 https://jsfiddle.net/rmf4v2ps/ 如上連結 我對<img>和<span>都設定了 vertical-align: bottom 但只有<img>有對齊 line-height 的底部,<span>則沒有 想請問一下 是哪裡設定錯了嗎? 謝謝 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 220.142.220.117 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1689859059.A.3A9.html

07/20 22:49, 11月前 , 1F
應該是因為span是行內元素,display:inline-block和
07/20 22:49, 1F

07/20 22:50, 11月前 , 2F
line-height:1em ,補上這兩段CSS就可以對齊底部了
07/20 22:50, 2F

07/20 23:00, 11月前 , 3F
因為span直接繼承了line-height,高度跟容器一樣,
07/20 23:00, 3F

07/20 23:00, 11月前 , 4F
所以沒有上下空間可移動,加line-height:initial
07/20 23:00, 4F

07/20 23:00, 11月前 , 5F
就可以回復預設值,inline-block則可有可無。
07/20 23:00, 5F
謝謝兩位 沒想到是span的line-height的關係 ※ 編輯: kisha024 (42.77.80.172 臺灣), 07/21/2023 10:27:08
文章代碼(AID): #1akJFpEf (Web_Design)
文章代碼(AID): #1akJFpEf (Web_Design)