テーブルが水平よりも垂直に大きい領域

Question

なぜ私の垂直方向の間隔が水平方向の間隔よりも大きいように見えるのか分かりません。適用する必要がある隠しCSSスタイルはありますか？

サンプルコードです（以下、または直接リンク：https://www.w3schools.com/code/tryit.asp?filename=FGK16ROO32ZA）。あなたは左のセル間のスペースを見ると、右狭いですが、セル上部と下部との間のスペースが大きいことができます。

body { 
 
    margin: 0px; 
 
} 
 

 
table, 
 
th, 
 
tr, 
 
td { 
 
    border: 0px; 
 
    border-spacing: 0px; 
 
    border-padding: 0px; 
 
} 
 

 
img { 
 
    width: 128px; 
 
    height: 128px; 
 
}

<table> 
 
    <tr> 
 
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th> 
 
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th> 
 
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th> 
 
    </tr> 
 
    <tr> 
 
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td> 
 
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td> 
 
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td> 
 
    </tr> 
 
    <tr> 
 
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td> 
 
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td> 
 
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td> 
 
    </tr> 
 
</table>

Answer 1

画像の下に小さな隙間があります（descendersのスペースが残っています）。ブロックするために彼らの表示プロパティを設定したり、浮いてそれを削除します。あなたはそれを削除することができますので

body { 
 
    margin: 0px; 
 
} 
 

 
table, 
 
th, 
 
tr, 
 
td { 
 
    border: 0px; 
 
    border-spacing: 0px; 
 
} 
 

 
img { 
 
    width: 128px; 
 
    height: 128px; 
 
    display:block; 
 
}

<table> 
 
    <tr> 
 
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th> 
 
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th> 
 
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th> 
 
    </tr> 
 
    <tr> 
 
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td> 
 
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td> 
 
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td> 
 
    </tr> 
 
    <tr> 
 
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td> 
 
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td> 
 
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td> 
 
    </tr> 
 
</table>

そして、私はあなたの質問に私のコメントで述べたように、何のボーダー・パディングプロパティはありません。

Answer 2

テーブル、目、TR、TD {}にこれを追加しますCSS：あなたは

https://www.w3schools.com/code/tryit.asp?filename=FGK1A71MO7PN

を必要とするものに応じて

padding: 2.5px 5px; 

調整番号

Answer 3

パディングを追加できます。0 2px 0 2px;それを均一にする。

body { 
 
    margin: 0px; 
 
} 
 

 
table, 
 
th, 
 
tr, 
 
td { 
 
    border: 0px; 
 
    border-spacing: 0px; 
 
    padding: 0 2px 0 2px; 
 
} 
 
img { 
 
    width: 128px; 
 
    height: 128px; 
 
}

<table> 
 
    <tr> 
 
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th> 
 
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th> 
 
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th> 
 
    </tr> 
 
    <tr> 
 
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td> 
 
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td> 
 
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td> 
 
    </tr> 
 
    <tr> 
 
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td> 
 
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td> 
 
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td> 
 
    </tr> 
 
</table>

Answer 4

HTMLテーブルの行と列を使用すると、高さと幅の値を定義しない限り柔軟です。私はあなたが元の画像の高さと幅に比例しない画像の幅と高さを与えていることがわかります。私は画像の高さや幅をスタイルする方法を提案します。

img{ 
width: 128px; 
/*height must be proportional to width otherwise image get stretch*/ 
} 

これがあなたを助けてくれることを願っています。