锚点，按钮不是水平相等的填充

Question

我有很长时间的这个问题。每当我通过标签或按钮标签在html中创建一个按钮并给出css样式填充顶部，底部等于按钮。但按钮仍然平等对齐水平。 供参考查找图片。

了解更多参考资料 JS FIDDLE

代码如下：

a{
    display:inline-block;
    text-transform:uppercase;
    background:#1a8acf;
    padding:10px 20px;
    text-decoration:none;
    color:#fff;
    font-family: arial, tahoma, helvetica, sans-sarif;
}
button{
    border:none;
    padding:10px 20px;
    background:#14214d;
    color:#fff;
    font-family: arial, tahoma, helvetica, sans-sarif;
}

Answer 1

此处line-height很重要，较小字体的默认值line-height较小。为两个元素设置相同的高度并调整小元素，直到它们相等。 line-height也是字体的中心。

// set line height
.line-height{
    line-height: 20px;
}

// remove some button default styles (Firefox)
button::-moz-focus-inner{
  padding : 0;
  border  : 0;
}

// using block elements and floating
a{
    float: left;
    display:block;

    text-transform:uppercase;
    background:#1a8acf;
    padding:10px 20px;
    text-decoration:none;
    color:#fff;
    font-family: arial, tahoma, helvetica, sans-sarif;
}

button{
    display: block;
    float: left;

    border:none;
    padding:10px 20px;
    background:#14214d;
    color:#fff;
    font-family: arial, tahoma, helvetica, sans-sarif;
}

<强> JSFiddle