How to make td (table cell) height to be the same as an < a> (link element) height?

I have created a simple example https://jsfiddle.net/9usfctbp/ that contains the issue.

There is a code from fiddle:

<table>
  <tr>
    <td>
      <a href="#">
        Link
      </a>
    </td>
  </tr>
</table>

a {
  display: block;
  font-size: 16px;
  line-height: 16px;
}

Expected result: td has height 16px the same as a link.

Actual result: td has height 18px that is 2px more than a link height.

>Solution :

try removing the padding from the td elements :

/* if you only want to keep the same height */
td {
   padding-top: 0;
   padding-bottom: 0;
}

/* or remove the padding from all edges */

td {
   padding: 0;
}