最近在練習Table的rowspan功能
我想嘗試將左半邊的某兩格合併,然後放入image,右邊兩格則是放一些文字,如下圖所示
但我無法讓圖片完全填滿格子,我用padding調到0之後底部還是有一點空白
下面是我寫在codepen的範例可以參考
https://codepen.io/zon-zong-min/pen/OJzEZzZ
麻煩各位大佬開導~ 謝謝
這個是常見的問題,先講解決方法。
方法一、將img變成block
.main_div_table img {
...
display: block;
}
方法二、將img的垂直對齊改成baseline以外的值
.main_div_table img {
...
vertical-align: top;
}
接著講這個問題發生的原因。
因為img預設的vertical-align是baseline,再加上預設的display為inline-block,所以在顯示時會把它視為一段文字的一部分。
baseline在英文字裏是將字母分成三段的第二條線(如同下圖的深藍線),因此圖的底端若是對齊那條線,那麼再更底下就會有一小截預留的空白,用來放y、g、p等字母的下半身。
解決方法就是讓img不是inline, 讓它不需要和文字對齊,或是讓它不要朝baseline對齊。