提交按钮上方的额外填充

Question

我无法摆脱提交按钮上方的多余填充。 我已经尝试了从调整高度到行高，填充到边距的所有方法，似乎没有任何效果。 基本上，我希望将其居中，而不是在字段底部显示“开始”文本，而我不知道该怎么做。

CSS：

@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:700);

input[type=submit] {
    background: #CDA91B;
    border: 0;
    color: #FFF;
    font-family: "Libre Baskerville", Libre Baskerville, Times New Roman, Times, serif;
    font-size: 20px;
    font-weight: 700;
    height: 25px;
    margin: 0;
    padding: 0;
    text-transform: lowercase;
    vertical-align: top;
    /* css3 */
    -webkit-transition: background 0.25s;
    -moz-transition: background 0.25s;
    -ms-transition: background 0.25s;
    -o-transition: background 0.25s;
    transition: background 0.25s;
}

    input[type=submit]:hover {
        background: #E5BE1E;
        cursor: pointer;
    }

演示：

http://jsfiddle.net/Y3Pfj/

更新：我意识到这是字体的一部分，我只是使用“填充”来描述区域。 显然，它实际上不是填充。

此外，按钮的高度必须与现在相同。 不幸的是，我开始认为我可能只需要制作背景图像。

Answer 1

那不是填充-它是文本创建的区域的一部分。 如果禁用text-transform: lowercase;则可以看到以下text-transform: lowercase; 规格。

如果确实需要该文本显示在按钮内，请尝试添加其他元素，然后将文本向上放置半em左右。

Answer 2

尝试这个。 我添加了行高和填充

@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:700);

 input[type=submit] {
background: #CDA91B;
border: 0;
color: #FFF;
font-family: "Libre Baskerville", Libre Baskerville, Times New Roman, Times, serif;
font-size: 20px;
font-weight: 700;
line-height: 12px;
margin: 0;
padding: 25px;
text-transform: lowercase;
/* css3 */
-webkit-transition: background 0.25s;
-moz-transition: background 0.25s;
-ms-transition: background 0.25s;
-o-transition: background 0.25s;
transition: background 0.25s;
   }

input[type=submit]:hover {
    background: #E5BE1E;
    cursor: pointer;
}

Answer 3

删除您在按钮上设置的静态高度。 而是使用填充，并为顶部填充使用较低的值。

padding: 0 0 5px;

除了您使用的其他CSS外，还应该为您提供25px高的按钮。 也许这不是最干净的解决方案，但至少是一个快速的解决方法。