边框在<a> block

Question

I need some help figuring out where a 1px space on top and bottom of a <a> inside a td comes from, and how to remove it.

The <a> is displayed as a flexbox, which is required, and fills the entire td.
It seems to be caused by border-sizing: border-box but I don't understand why (if you remove the property it works fine, but I kind of need it and would rather find another solution if a clean alternative exists).

table {
	border-collapse: collapse;
}

td {
	padding: 0;
}

td {
	width: 5rem;
	height: 5rem;
	padding: 0;
	border: 1px solid red;
}

a {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	border: 1px solid blue;
	outline: 0;
}

* {
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

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

Answer 1

将box-sizing: border-box应用于*选择器，将box-sizing: content-box应用于td > a元素。此外，width: 100%可以从a元素中删除。

＆＃13;

＆＃13;

* {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
}

td {
  width: 5rem;
  height: 5rem;
  padding: 0;
  border: 1px solid red;
}

td > a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  border: 1px solid blue;
  outline: 0;
  -webkit-box-sizing: content-box; 
  -moz-box-sizing: content-box; 
  box-sizing: content-box;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;