我的问题是关于那些讨厌的 HTML 边界

Question

我一直在使用 fancybox 创建一个网页来显示一些图像。我构建的表格工作正常，除了每行下方有一个间隙。

https://codepen.io/michael-wutzke/pen/MWgMwmd

我试过了

CSS:

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
     padding: 0; /* 'cellpadding' equivalent */
}

我只想在不更改 fancybox 代码的情况下让每个单元格都没有填充或边框。

HTML:

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>

</head>

<body>

  <table>

    <tr>
      <td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/58/04/35/5804350baef289c705d468b924f6c4b5.jpg" data-caption="a" name="ImageA1" /></td>
      <td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/8d/c2/11/8dc21159586258c51544784a4d3ff335.jpg"></td>
      <td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/26/5b/77/265b77c611b1adc08cefed2fd2fe7139.jpg" data-caption="c-d" name="Image75" /></td>
    </tr>
    <tr>
      <td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/a2/c7/d0/a2c7d0dd41ab3399f55114d956cc8584.jpg " data-caption="D-G " name="ImageC1 " /></td>
      <td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/e0/1a/f0/e01af0222cbaf2a6e3e8d93b38e1febc.jpg " data-caption="H-J " name="ImageE1 " /></td>
      <td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/42/10/47/4210475852c80fea3db3a0129144dba2.jpg " data-caption="K-M " name="ImageF1 " /></td>
      <td></td>

    </tr>
    <tr>

      <td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/3a/a4/f9/3aa4f9942fad628c02c002485e7e864a.jpg " data-caption="M " name="ImageG1 " /></td>
      <td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/c1/a0/6a/c1a06afa6aa35a3f68da4495eecbfa57.jpg " data-caption="N-P " name="H1 " /></td>

      <td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/ca/a8/08/caa8085a33443bdce3180ab95a036d1a.jpg " data-caption="Q-S " name="ImageI1 " /></td>
    </tr>

    <tr>
      <td><img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/33/c1/87/33c1872ed68c770608b4c1e3a3ad6481.jpg " data-caption="S " name="ImageI1 " /></td>
      <td>
        <img style="width: 375px; height: 285px;" alt="" src="https://i.pinimg.com/564x/02/1e/2d/021e2d71d0feda4d59540994f286c8ad.jpg " data-caption=S-U " name="ImageJ1 " /></td>
        <td><img style="width: 375px; height: 285px; " alt=" "
src="https://i.pinimg.com/564x/e0/a9/c3/e0a9c3c6979ce6a7bc25d4df50c87e6b.jpg " data-caption="V-Z " name="ImageK1 " /></td>
      </tr>


  </table>


</body>

</html>

Answer 1

每个浏览器应用自己的样式，您需要使用 Normalize CSS or reset CSS

覆盖它

如果您将 img 标签设置为 display: block;，边距将会消失。

Answer 2

您可以使用此代码

body {
            margin: 0;
            padding: 0;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        table td,
        table th {
            padding: 0;
        }
        table tr td img {
            width: 100%;
            height: 243px;
            float: left;
        }

<table>
        <tr>
            <td><img  alt="" src="https://i.pinimg.com/564x/58/04/35/5804350baef289c705d468b924f6c4b5.jpg" data-caption="a" name="ImageA1" /></td>
            <td><img  alt="" src="https://i.pinimg.com/564x/8d/c2/11/8dc21159586258c51544784a4d3ff335.jpg"></td>
            <td><img  alt="" src="https://i.pinimg.com/564x/26/5b/77/265b77c611b1adc08cefed2fd2fe7139.jpg" data-caption="c-d" name="Image75" /></td>
            <td><img  alt="" src="https://i.pinimg.com/564x/58/04/35/5804350baef289c705d468b924f6c4b5.jpg" data-caption="a" name="ImageA1" /></td>
            <td><img  alt="" src="https://i.pinimg.com/564x/8d/c2/11/8dc21159586258c51544784a4d3ff335.jpg"></td>
            <td><img  alt="" src="https://i.pinimg.com/564x/26/5b/77/265b77c611b1adc08cefed2fd2fe7139.jpg" data-caption="c-d" name="Image75" /></td>
        </tr>
        <tr>
            <td><img  alt="" src="https://i.pinimg.com/564x/a2/c7/d0/a2c7d0dd41ab3399f55114d956cc8584.jpg " data-caption="D-G " name="ImageC1 " /></td>
            <td><img  alt="" src="https://i.pinimg.com/564x/e0/1a/f0/e01af0222cbaf2a6e3e8d93b38e1febc.jpg " data-caption="H-J " name="ImageE1 " /></td>
            <td><img  alt="" src="https://i.pinimg.com/564x/42/10/47/4210475852c80fea3db3a0129144dba2.jpg " data-caption="K-M " name="ImageF1 " /></td>
            <td><img  alt="" src="https://i.pinimg.com/564x/a2/c7/d0/a2c7d0dd41ab3399f55114d956cc8584.jpg " data-caption="D-G " name="ImageC1 " /></td>
            <td><img  alt="" src="https://i.pinimg.com/564x/e0/1a/f0/e01af0222cbaf2a6e3e8d93b38e1febc.jpg " data-caption="H-J " name="ImageE1 " /></td>
            <td><img  alt="" src="https://i.pinimg.com/564x/42/10/47/4210475852c80fea3db3a0129144dba2.jpg " data-caption="K-M " name="ImageF1 " /></td>
        </tr>
        <tr>
            <td><img  alt="" src="https://i.pinimg.com/564x/3a/a4/f9/3aa4f9942fad628c02c002485e7e864a.jpg " data-caption="M " name="ImageG1 " /></td>
            <td><img  alt="" src="https://i.pinimg.com/564x/c1/a0/6a/c1a06afa6aa35a3f68da4495eecbfa57.jpg " data-caption="N-P " name="H1 " /></td>
            <td><img  alt="" src="https://i.pinimg.com/564x/ca/a8/08/caa8085a33443bdce3180ab95a036d1a.jpg " data-caption="Q-S " name="ImageI1 " /></td>
            <td><img  alt="" src="https://i.pinimg.com/564x/3a/a4/f9/3aa4f9942fad628c02c002485e7e864a.jpg " data-caption="M " name="ImageG1 " /></td>
            <td><img  alt="" src="https://i.pinimg.com/564x/c1/a0/6a/c1a06afa6aa35a3f68da4495eecbfa57.jpg " data-caption="N-P " name="H1 " /></td>
            <td><img  alt="" src="https://i.pinimg.com/564x/ca/a8/08/caa8085a33443bdce3180ab95a036d1a.jpg " data-caption="Q-S " name="ImageI1 " /></td>
        </tr>
        <tr>
            <td><img  alt="" src="https://i.pinimg.com/564x/33/c1/87/33c1872ed68c770608b4c1e3a3ad6481.jpg " data-caption="S " name="ImageI1 " /></td>
            <td><img  alt="" src="https://i.pinimg.com/564x/02/1e/2d/021e2d71d0feda4d59540994f286c8ad.jpg " data-caption=S-U name="ImageJ1 " /></td>
            <td><img  alt=" " src="https://i.pinimg.com/564x/e0/a9/c3/e0a9c3c6979ce6a7bc25d4df50c87e6b.jpg " data-caption="V-Z " name="ImageK1 " /></td>
            <td><img  alt="" src="https://i.pinimg.com/564x/33/c1/87/33c1872ed68c770608b4c1e3a3ad6481.jpg " data-caption="S " name="ImageI1 " /></td>
            <td><img  alt="" src="https://i.pinimg.com/564x/02/1e/2d/021e2d71d0feda4d59540994f286c8ad.jpg " data-caption=S-U name="ImageJ1 " /></td>
            <td><img  alt=" " src="https://i.pinimg.com/564x/e0/a9/c3/e0a9c3c6979ce6a7bc25d4df50c87e6b.jpg " data-caption="V-Z " name="ImageK1 " /></td>
        </tr>
    </table>

我的问题是关于那些讨厌的 HTML 边界

My question is about those pesty HTML borders

html

border

padding

fancybox

CSS:

HTML: