复选框元素下的额外空间

Question

为什么复选框下方有额外的空间？它在DevTools中未标识，但将其容器扩展了约3-4个像素。 我已经在Firefox和Edge浏览器中对其进行了测试，似乎该复选框的可视化存在不一致（尽管height: 50px; width: 50px;，Firefox并没有改变它的大小 我使用Chrome 67（在Windows 10上）。在Edge中，问题似乎相同。 这是JSFiddle： extra space below checkbox

* {
  box-sizing: border-box;
}

.container {
  border: solid 1px;
  padding: 0;
}

input {
  height: 60px;
  width: 60px;
  margin: 0;
}

<div class="container">
  <input type="checkbox" />
</div>