HTML Table Spacing Between Rows

Question

Here is the code for a fairly simple table I made. The problem is there is extra white spacing around the bottom of the first and second row of the table. Why is that. I've tried multiple solutions and nothing has worked.

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>

@Quentin You say that like OP's not using CSS to style the table. — Jon Uleis, Dec 30 '16 at 00:33
@JonUleis — I say that like they *are* using tables for layout. — Quentin, Dec 30 '16 at 00:33
The extra space is a feature of inline-level elements (such as `img`), and is designed to accommodate the *descenders* in typography: http://stackoverflow.com/a/31445364/3597276 — Michael Benjamin, Dec 30 '16 at 16:10

score 1 · Accepted Answer · answered Dec 30 '16 at 00:32

Add display: block; to your <img> elements to ensure there's no additional spacing around them in each <td>. This fixes the background bleeding through.

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 Table Spacing Between Rows

1 Answers1