<table>タグの中に<img>タグを入れると枠と画像の間にわずかな隙間が生まれてしまいます。この隙間を無くすにはどうすればいいのでしょうか？

Question

<table>タグの中に<img>タグを入れると枠と画像の間にわずかな隙間が生まれてしまいます。この隙間を無くすにはどうすればいいのでしょうか？[リンク内容](http://ksfree-bird.com/border/)

###前提・実現したいこと

<table>タグの中に<img>タグを入れると枠と画像の間にわずかな隙間が生まれてしまいます。この隙間を無くすにはどうすればいいのでしょうか？

###発生している問題・エラーメッセージ

「枠」と「画像の上の間」に隙間が生じる。

###該当のソースコード

<table style="margin-left: auto; margin-right: auto; background-color: pink; border: 10px solid blue; width: 700px;">
<tbody>
<tr>
<td>
<p><img class="alignnone size-full wp-image-7014" src="http://ksfree-bird.com/wp-content/uploads/2017/01/7e64b3685d02a88601b9c6894a6218d3.png" alt="" width="700" height="100" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>

###試したこと
検索したところ枠と画像の下の隙間を無くすのは出てきましたが、枠と画像の上の隙間を無くす方法は出来ませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
wordpressで「colorful」というランディングページ作成ツールを使い作成しています。
htmlとcssのみの使用です。

Answer 1

.entry-content td, .comment-content td {
    padding: 6px 0; /* この6px分が空いている */
}

【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【第1回 詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

【Web関係者は知っておくべきGoogleChromeデベロッパーツールの使い方 | Ocadweb】
http://ocadweb.com/web/googlechromedevelopertools

Comments

[haku06]

ご回答ありがとうございます。htmlタグに直接<td style="padding: 6px 0;">と、このように記述したのですが隙間があるままです・・・。

[kei344]

直接 指定しても、同じ値を指定しているのだから変わらないですよ。直接書くなら下記。
<td style="padding: 0;">

[haku06]

返信ありがとうございます。このページのcssの<td>にmarginが上下に6px記述されていてため隙間が生まれていて、それを0pxにすれば隙間がなくなるということで合ってますかね・・・。（汗）ベストアンサーにさせていただきます。

[kei344]

> このページのcssの<td>に
厳密には .entry-content か .comment-content 以下にある td に限られます。

> marginが
padding の書き間違いですかね。

> 上下に6px記述されていてため隙間が生まれていて、それを0pxにすれば隙間がなくなる
合っています。

[haku06]

はい、paddingの間違いでした・・・。なるほど、そうなんですね。お陰様で無事解決できました。ご回答ありがとうございました。

Answer 2

ChromeのdevToolsで確認してみてください。どのスタイルシートが悪さしているかが確認できます。

Comments

[haku06]

ご回答ありがとうございます。参考にさせていただきます。