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;规范，则可以看到此内容。

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

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的高按钮。也许不是最干净的解决方案，但至少它是一个快速的解决方案。

提交按钮顶部的额外填充

3 个答案: