<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
<title>Moravský kras</title>
</head>
<body>
<table style="border-spacing: 0px">
<tr>
<td style="padding: 0px"><img src="http://placehold.it/150x150"></td>
</tr>
</table>
</body>
</html>
この単純なコードを使用すると、画像の下の表のセルに下部パディングが表示されます (少なくとも firefox/chrome では)。どうすればそれを取り除くことができるか教えてください。ここにフィドルがあります。
これは生まれつきのimg存在inlineによるものです。それを作るblock。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
<title>Moravský kras</title>
</head>
<body>
<table style="border-spacing: 0px">
<tr>
<td style="padding: 0px"><img src="http://placehold.it/150x150" style="display: block;"></td>
</tr>
</table>
</body>
</html>
画像要素はそのような要素の 1 つでinline、ボックス モデルを持つと同時に、表示される性質も兼ね備えています。だから、それは一種の精神と関係がありvertical-alignます。ディスプレイしていただくとblock通常のボックスモデルとして扱います。これは私の見解です。