クリッカブルマップとテーブルの間に隙間が…

質問

クリッカブルマップとテーブルタグを

・・・・・クリッカブルマップ画像・・・・・
テーブル左（画像貼り付け）　テーブル右

という配置で併用したところ、マップ画像とテーブル左の間に隙間ができてしまいます。
border="0" cellpadding="0" cellspacing="0"などを入れてみても変化がありません。
左テーブルに貼る画像はマップ画像の続き（例：マップ画像の左下に花の花弁部分、テーブル画像に茎部分、といった感じです）なので、どうしても隙間なく並べたいのですが、それは可能でしょうか？
解る方がいらっしゃいましたら教えてください。

よろしくお願いいたします。

回答No.2

abril · ベストアンサー

クリッカブルマップ画像imgを挿入した後に改行コードを入れてその下にそのままtable部分のコードを書くと、1～2pxの隙間が空きます。改行コードの部分がスペースとして解釈されてしまうからです。

これを回避するには、

・改行コードを削除（隠す）
・imgをブロック要素化する

といった対処が考えられます。
----------------------------------------------------------------------
【例1】クリッカブルマップ画像の後の改行コードをコメントで隠す
----------------------------------------------------------------------
【HTMLソースサンプル】
<img class="flower_top" src="images/hoge1.jpg" alt="花の画像" width="100" height="50" usemap="#flower"><!--

--><table class="hoge" cellspacing="0" cellpadding="0" border="0" summary="概要">
<tr>
<td><img src="images/hoge2.jpg" alt="茎の画像" width="100" height="150"></td>
<td>テキスト</td>
</tr>
</table>

<map name="flower">
<area shape="poly" coords="（省略）" href="リンク先のURI" alt="代替テキスト">
</map>
----------------------------------------------------------------------
【例2】imgをブロック要素化する
----------------------------------------------------------------------
CSSで以下の様にスタイルを設定します。
【CSSソースサンプル】
img.flower_top {
display: block;
border: none;
}
table.hoge {
border-collapse: collapse;
}
----------------------------------------------------------------------
【HTMLソースサンプル】
<img class="flower_top" src="images/hoge1.jpg" alt="花の画像" width="100" height="50" usemap="#flower">

<table class="hoge" cellspacing="0" cellpadding="0" border="0" summary="概要">
（以下【例1】と同）
----------------------------------------------------------------------

お礼

解決しました！本当にありがとうございました！

回答No.1

noname#119957

クリッカブルマップとテーブルタグを
・・・・・クリッカブルマップ画像・・・・・
テーブル左（画像貼り付け）　テーブル右
という配置で併用したところ、マップ画像とテーブル左の間に隙間ができてしまいます。
＜--この部分の意味が理解できません。

普通、テーブルの中に画像を隙間無く配置するときは、
img {
display:block;
}
などが必要なはずですが・・・

補足

回答ありがとうございます。
わかりづらい説明で申し訳ありません。
参考画像を添付してみました。これで把握いただけると良いのですが…