HTML 表格行间距

<分区>

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

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>

最佳答案

添加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>

关于HTML 表格行间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41388958/

上一篇：jquery - 当焦点位于样式化的 DIV 上时，如何捕获按键？

下一篇：html - Bootstrap 3 : Vertically stack buttons after first one wraps?

相关文章：

php - 如何正确放置我的字幕？

php - WordPress 博客索引 CSS masonry 布局

javascript - 如何在没有更改属性时添加 CSS 过渡？

html - asp.net中跳转到html标签末尾的快捷键

html - 下拉菜单在 Firefox 中的显示方式与在其他浏览器中的不同

css - 如何排列特定宽度的响应式中心列？

javascript - 在未聚焦的文本输入中显示闪烁的光标

javascript - 选择一个选项后动态禁用下拉菜单

javascript - 为什么这个显示/隐藏脚本不起作用？

javascript - 当我在 HTML 中对 JS 函数使用 onkeyup 时，为什么控制台显示我的函数未定义？