获得比假设更多的填充

Question

当我注意到我给出的填充物不对时，我正在编写一个菜单。

正如你所看到的，它甚至不是中心对齐的。我已经尝试了盒子大小但没有...

这是我的代码：

<!-- html -->
<a href="#">LinkedIn</a>


<!-- css -->
a:link, a:visited{
   text-decoration: none;
   text-transform: uppercase;
   padding: 6px 20px;
   font-size: 14px;
   line-height: 14px;
   box-sizing: border-box;
}

我还使用了reset.css， this one

DEMO

Answer 1

我要在这里发布两张图片。第一个是来自codepen的图像

我把这个截图带到了photoshop中并测量了两侧，以便你可以看到。顶部的盒子是完全相同的高度（一个是从另一个复制的），两侧的盒子宽度完全相同。因此，您可以看到这不是padding问题。 Padding正如预期的那样工作。但是当你提到

时，某些东西仍然会被看作

这是第二张图片：

在此图片中，我将您的字体更改为普通"Arial"，然后再次测量这些框，以便您可以看到。它们完全相同，排列完美。这里的问题与您的CSS无关，而是如何呈现font-family。我自己用某些字体遇到过这个问题。您可以更多地使用line-height或者总是过度补偿底部的padding以弥补差异。例如：padding: 6px 20px 7px 20px;