Tabelle größeren Raum vertikal als horizontal

Question

Ich kann nicht herausfinden, warum mein vertikaler Abstand größer als der horizontale Abstand scheint. Gibt es einen versteckten CSS-Stil, den ich anwenden muss?

Hier ist Beispielcode (unten oder direkte Verbindung: https://www.w3schools.com/code/tryit.asp?filename=FGK16ROO32ZA). Sie können den Raum zwischen den linken Zellen sehen und rechts sind schmal, aber der Raum zwischen den Zellen oben und unten ist größer:

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

Ihre Bilder haben eine kleine Lücke unter ihnen (ein freier Platz für descenders). Entfernen Sie es durch ihre Anzeige-Eigenschaft zu sperren oder schwimmend sie:

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>

Und wie ich in meinem Kommentar zu Ihrer Frage erwähnt, gibt es keine Grenze-padding-Eigenschaft, so dass Sie es entfernen können.

Answer 2

hinzufügen Zu Tisch, th, tr, td {} CSS:

padding: 2.5px 5px; 

einstellen Zahlen nach, was Sie brauchen

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

Answer 3

Sie können Padding hinzufügen: 0 2px 0 2px; um es gleichmäßig zu machen.

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 Tabellenzeilen und Spalte sind flexibel, wenn Sie die Höhe und Breite Wert definiert. Wie ich sehen kann, haben Sie Breite und Höhe des Bildes angegeben, die nicht proportional zur Höhe und Breite des ursprünglichen Bildes ist. Ich würde vorschlagen, die Höhe oder Breite des Bildes zu stylen.

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

Ich hoffe, dass dies Ihnen helfen wird.