Удаление нежелательных отступов / полей / границ в таблице изображений HTML - PullRequest
Новая
       50

Удаление нежелательных отступов / полей / границ в таблице изображений HTML

0 голосов
/ 08 июля 2019

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

По какой-то причине в окончательный результат добавлены нечетные поля / отступы, хотя я установил все отступы / поля / границы на 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;
  }

Image with unnecessary spacing

Ответы [ 2 ]

1 голос
/ 08 июля 2019

Попробуйте удалить cellspacing & cellpadding: 

<table align="center" class="gridStyle" cellpadding="0" cellspacing="0">...</table>
0 голосов
/ 08 июля 2019

Добавить интервал границы: 0, граница-коллапс: коллапс и img для отображения: блок 

table { 
    border-spacing: 0;
    border-collapse: collapse;
}
td {
    padding:0px;
}
td img {
    display:block;
}

.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;
}
<table align="center" class="gridStyle">
  <tr><td><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></td><td><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></td></tr>
  <tr><td><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></td><td><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></td></tr>
</table>
...