[html] 你知道著名的3像素Bug指的是什么嗎？怎么解決呢？

img標簽渲染之后下方會出現(xiàn)幾個像素（我用谷歌測試是4px, 火狐3.5px）的空白； img是行內元素，默認display：inline; 它與文本的默認行為類似，下邊緣是與基線對齊，而不是貼緊容器下邊緣，所以會有幾像素的空白； 解決辦法：把img設置為display: block;給img和其父元素都設置vertical-align: top；讓其top對齊而不是baseline對齊；給img父元素設置line-height: 0;

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[html] 你知道著名的3像素Bug指的是什么吗？怎么解决呢？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。