css - 提交按钮顶部的额外填充

Question

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

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;规范，您可以看到这一点。

如果您确实需要该文本出现在按钮内，请尝试添加另一个元素，然后将文本向上放置半个 em 左右。

Answer 2

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

padding: 0 0 5px;

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

Answer 3

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

@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;
}