[問題]使用CSS設定字型消失

看板Web_Design作者時間7年前 (2018/02/03 12:04), 編輯推噓1(106)
留言7則, 2人參與, 最新討論串1/2 (看更多)
我對以下的文字 透過CSS設定字型: <li><a href="#">待</a></li> li a{ display:block; padding:17px; text-decoration:none; font:20px arial; color:black; } 所以我原本認為 li元素的高度寬度 都應該是17*2+20=54 然而我開啟開發者模式 看到的是以下這樣: https://imgur.com/RAGxZb3
高度是58 請問為什麼高度不是預期的54 而是58 多出來的4px 是哪來的? -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.169.111.2 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1517630696.A.1E5.html

02/03 12:53, , 1F
f12不是有個區塊會顯示整體 padding margin border. .
02/03 12:53, 1F

02/03 12:54, , 2F
從那邊看吧
02/03 12:54, 2F

02/03 13:03, , 3F
應該是行高的問題,每個瀏覽器都會預設給1.0-1.2不等的li
02/03 13:03, 3F

02/03 13:03, , 4F
ne height,顯示的方塊有包含行高。試試看設line-height:
02/03 13:03, 4F

02/03 13:03, , 5F
1
02/03 13:03, 5F

02/03 13:11, , 6F
不過這樣設可能還是會差1px左右,這問題可以參考這篇 htt
02/03 13:11, 6F

02/03 13:11, , 7F
ps://goo.gl/wNzV9N
02/03 13:11, 7F
文章代碼(AID): #1QTJJe7b (Web_Design)
文章代碼(AID): #1QTJJe7b (Web_Design)