提交按鈕上方的額外填充

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高的按鈕。 也許這不是最干凈的解決方案，但至少是一個快速的解決方法。