我的问题是关于那些讨厌的 HTML 边框答案

【问题标题】：My question is about those pesty HTML borders我的问题是关于那些讨厌的 HTML 边框
【发布时间】：2020-02-02 21:42:13
【问题描述】：

我一直在创建一个网页来使用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>

【问题讨论】：

标签： html fancybox border padding

【解决方案1】：

每个浏览器都应用自己的样式，您需要使用 Normalize CSS 或 reset CSS 覆盖它

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

【讨论】：

我试图自己解决这个问题，并从我的 codepen 中删除了 fancybox 代码并应用了你的建议。那个 CSS 有效。但后来我把它应用到我更大的fancybox页面codepen.io/michael-wutzke/pen/PMjwod，我仍然得到底部边框。
因为您使用的是带有 display: inline-block 的 href (a.fancybox)；只需使用 display: block;这应该可以解决问题
嘿。谢谢，解决了！
@user2828851 请接受我的回答作为正确答案，谢谢

【解决方案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>

【讨论】：