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

2022-03-25 04:12:36 字數 633 閱讀 7638

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

解決辦法一是消除掉匿名盒子的高度,也就是給a設定line-height:0或font-size:0;

解決辦法二是給兩者vertical-align:top,讓其top對齊,而不是baseline對齊

解決辦法三是給img以display:block,讓它和匿名行級盒子不在乙個布局上下文中,也就不存在行級盒的對齊問題

img標籤有時候會出現下方無緣無故多出畫素的bug

解決方法1:

設定 img 的 vertical-align: bottom;

ul ul li img

2解決方法2:

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

ul ul li img

3解決方法3

設定 ul 的 font-size:0;

ul ul li

4解決方法4

使li浮動,並設定img為塊級元素

ul ul li img

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

前兩天,在做乙個 的時候,發現a標籤中使用img後的高度多了4px,各種糾結。最後,仔細分析,終於找到原因了,因為img是行內元素,預設display inline 它與文字的預設行為類似,下邊緣是與基線 baseline 對齊,而不是緊貼容器下邊緣。將displayp設定為block即可消除4px...

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 ...