Стол больше места вертикально, чем горизонтально

Я не могу понять, почему мой вертикальный интервал кажется больше, чем горизонтальный. Есть ли скрытый стиль 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>

Источник

4 ответа

Решение

Ваши изображения имеют небольшой промежуток под ними (пространство, оставленное для спусков). Удалите его, установив их свойство display, чтобы блокировать или перемещать их:

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>

И, как я отметил в своем комментарии к вашему вопросу, свойства заполнения границ нет, поэтому вы можете удалить его.

Источник

Строки и столбцы HTML-таблицы являются гибкими, если вы не определили значение высоты и ширины. Как я вижу, вы указали ширину и высоту изображения, которые не пропорциональны высоте и ширине исходного изображения. Я бы предложил следующий способ стилизации изображения по высоте или ширине.

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

Я надеюсь, что это поможет вам.

Источник

Вы можете добавить отступы: 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>

Источник

Добавьте это в таблицу, th, tr, td{} css:

 padding: 2.5px 5px;

Настройте числа в соответствии с тем, что вам нужно

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

Источник
Другие вопросы по тегам