行之间的HTML表格间距[重复]答案

【问题标题】：HTML Table Spacing Between Rows [duplicate]行之间的HTML表格间距[重复]
【发布时间】：2023-03-06 23:23:01
【问题描述】：

这是我制作的一个相当简单的表格的代码。问题是表格的第一行和第二行底部有额外的空白间距。这是为什么。我尝试了多种解决方案，但没有任何效果。

body, html { 
    height: 100%;
}
body {
    background-color: #a00000;
    margin: 0; /* remove default margins added by browsers */
}
.wrapper {
   display: flex;
   height: 100%;
}
table {
    margin: auto;
    background-color: #fff;
}
img {
    max-width: 120px;
    max-height: 120px;
    border: solid 5px #a00000;
    background-color: #a00000;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bobcat Menu</title>
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="wrapper">
            <table align="center" cellspacing="0" border-spacing="0">
<tr>
                <td>
                    <a href="mobincube://action/section/DropDay">
                        <img src="
https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/D.png" />
                    </a>
                </td>
                <td>
                    <a href="mobincube://action/section/Schedule">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/S.png" />
                    </a>
                </td>      
            </tr>
            <tr>
                <td>
                    <a href="mobincube://action/section/Calculators">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/C.png" />
                    </a>
                </td>
                <td>
                    <a href="mobincube://action/section/News">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/N.png" />
                    </a>
                </td>      
            </tr>       
            </table>
        </div>
    </body>
</html>

【问题讨论】：

不要使用表格进行布局。 CSS 现在已有二十年历史了。
@Quentin 你这么说就像 OP 不使用 CSS 来设置表格样式。
@JonUleis — 我说他们正在使用表格进行布局。
额外的空间是内联元素的一个特性（例如img），旨在容纳排版中的descenders：stackoverflow.com/a/31445364/3597276

标签： html css

【解决方案1】：

将display: block; 添加到您的<img> 元素中，以确保在每个<td> 中它们周围没有额外的间距。这修复了背景渗出。

body,
html {
  height: 100%;
}
body {
  background-color: #a00000;
  margin: 0;
  /* remove default margins added by browsers */
}
.wrapper {
  display: flex;
  height: 100%;
}
table {
  margin: auto;
  background-color: #fff;
}
img {
  display: block;
  max-width: 120px;
  max-height: 120px;
  border: solid 5px #a00000;
  background-color: #a00000;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Bobcat Menu</title>
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="wrapper">
    <table align="center" cellspacing="0" border-spacing="0">
      <tr>
        <td>
          <a href="mobincube://action/section/DropDay">
            <img src="
https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/D.png" />
          </a>
        </td>
        <td>
          <a href="mobincube://action/section/Schedule">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/S.png" />
          </a>
        </td>
      </tr>
      <tr>
        <td>
          <a href="mobincube://action/section/Calculators">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/C.png" />
          </a>
        </td>
        <td>
          <a href="mobincube://action/section/News">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/N.png" />
          </a>
        </td>
      </tr>
    </table>
  </div>
</body>

</html>

【讨论】：