a標籤中使用img後的高度多了4px

2022-03-25 03:27:59 字數 446 閱讀 6105

前兩天,在做乙個**的時候,發現a標籤中使用img後的高度多了4px,各種糾結。

最後,仔細分析,終於找到原因了,因為img是行內元素,預設display: inline; 它與文字的預設行為類似,下邊緣是與基線(baseline)對齊,而不是緊貼容器下邊緣。將displayp設定為block即可消除4px的bug。

既然原因找到了,那麼,解決方案肯定不止這一種啦!

如下:

1.將影象定義成block (display:block)

2.給父級設定固定高度,然後overflow:hidden

3.設定font-size:0;

4.設定 img 的 vertical-align: bottom;

5.設定 img 的 margin-bottom: -4px;

就是這樣,以後可以根據具體使用場景來確定最優方案了。

a標籤中使用img後的高度多了幾個畫素

a元素下有乙個匿名文字,這個文字外有乙個匿名行級盒子,它有的預設vertical align是baseline的,而且往往因為上文line height的影響,使它有個line height,從而使其有了高度,因為baseline對齊的原因,這個匿名盒子就會下沉,往下撐開一些距離,所以把a撐高了。解...

HTML中使用struts標籤的方法

在jsp中使用struts標籤要先對標籤檔案進行引用,這裡用struts2作為例子,如下 taglib prefix s uri struts tags 而在html中根本無法識別上面 所以在html無法使用struts標籤.解決方法 在tomcat目錄 conf web.xml 檔案中,找到 se...

sql標籤中使用標籤變數以及文章的鏈結 織夢CMS

今天看到有人問起怎麼實現 arclist 標籤中呼叫 shottitle 作為 關鍵字的輸入 sql標籤現在已經支援 引用其他標籤 但是官方沒有說明 這裡簡單說一下 tagname 在sql標籤中 sql 中在任何位置加 tagname 來實現 id me me url getonearchive ...