Html 复选框元素下的附加空间

为什么复选框下面有额外的空间？它在DevTools中没有标识，但将其容器扩展到大约3-4像素。 我在Firefox和Edge浏览器中进行了测试，checkbox的可视化效果似乎不一致（Firefox没有改变它的大小，尽管高度：50px；宽度：50px； 我用的是Chrome67（在Windows10上）。Edge上的问题似乎也一样。 以下是JSFIDLE：

*{
框大小：边框框；
}
.集装箱{
边框：实心1px；
填充：0；
}
输入{
高度：60px；
宽度：60px；
保证金：0；
}

要创建自定义复选框，请使用类似的方法。空格问题与@Paulie_D提到的内容有关。多谢