html - 画像の表の HTML で不要なパディング/マージン/境界線を削除する

Question

すべてのセルの幅と高さが同じサイズの画像のテーブルを作成しようとしています。

すべてのパディング/マージン/ボーダーを0に設定したにもかかわらず、何らかの理由で最終結果に奇妙なマージン/パディングが追加されました.

テーブルの画像/金枠の周りの赤い点線は、境界線の外側にあるものを取り除こうとしていることを示すためのものです。

HTML:
<table align="center" class="gridStyle">
  <tr><td><img src="~/Images/Heart.png" /></td><td><img src="~/Images/Heart.png" /></td></tr>
  <tr><td><img src="~/Images/Heart.png" /></td><td><img src="~/Images/Heart.png" /></td></tr>
</table>


CSS:
.gridStyle
{
  border: 2px solid gold;
  max-width: 50%;
  margin: 0;
  padding: 0;
}

  .gridStyle th, .gameDisplay td, .gameDisplay tr
  {
    border: 0;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
  }

  .gridStyle img
  {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 1px dotted red;
  }