7

私は多くのフォーラムを読み、そこで解決策を試しましたが、どれもうまくいきませんでした。すべての画像の間にまだ小さなギャップがあります。コードは次のとおりです。

<table id="Table">
            <tr>
                <td id="td1"><h2>~ Curling ~</h2></td>
                <td id="td2" rowspan="2"><img src="../images/curlingMid.jpg" 
                width="100%" height="100%" border="2" alt=""/></td>
                <td id="td1"><h2>~ Curling ~</h2></td>
            </tr>
</table>


#td1 { width: 32%;vertical-align: text-top; }
#td2 { padding-right: 5px; padding-top: 5px; }
4

2 に答える 2

12

画像はインライン要素であり、ベースラインとの位置合わせのため、画像の下に空白があります。

それを修正するには、次を試してください。 

#td2 img {display: block;}

また

#td2 img {vertical-align: bottom;}

フィドルのデモ: http://jsfiddle.net/audetwebdesign/WxrvC/

画像の上部と右側に 5px のパディングを設定していることに注意してください。これはスタイリングの目的であると想定しました。

また、id属性はページ上で一意である必要があり、 を使用するclassと、保守がはるかに容易になり、CSS ルールの再利用が容易になります。

于 2013-05-30T16:36:22.177 に答える
2

異なるブラウザーは、異なるデフォルトのパディング/マージン/スペースなどで html 要素をレンダリングします。次のようにこれらをリセットしてみてください:

#table td {padding: 0px; margin: 0px;}
#table {border-spacing: 0px;}
于 2013-05-30T16:41:49.663 に答える