将文本放在按钮内

Question

我的按钮上面有文字，上面有太多空间。看起来像这样：

如何将文本放置得更高一点，以免它被按钮的边框切割？

HTML：

<input type="button" value="a">

到目前为止，这是我的CSS：

input[type="button"], input[type="submit"] {
  min-width: 40px;
  height: 25px;
  font-size: 30px;
  color: #ffffff;
  margin-right: 10px;
  padding: 0px;
}

即使使用line-height，!important属性也不会改变任何内容。

Answer 1

设置固定高度会使对齐关闭。 设置字体大小足以使div自动调整大小，文本将居中。 试试这个新的css：

input[type="button"], input[type="submit"] {
  min-width: 40px;
  font-size: 30px;
  color: #ffffff;
  margin-right: 10px;
}

Answer 2

如果您真的想要保留按钮的固定宽度和高度以及文本的字体大小，那么您可以执行以下操作。 这是将文本放在不同的div中，以便您可以将其放在按钮的顶部。 如果按钮是position：relative，则文本div是position：absolute，并且HTML是结构化的，因此文本div在按钮标记内，然后它将很好地分层。 此外，当以这种方式完成时，文本将随按钮一起移动并且不会被移位（如果你给按钮一个边距：100px）。

<button value="">
    <div id="buttonText">a</div>
</button>

Here is my CSS so far:

<style>
button {
    width: 40px;
    height: 25px;
    margin-right: 10px;
    position: relative;
}

#buttonText
{
    font-size: 30px;
    position: absolute;
    top: -9px;
    left: 9px;
    color: #FFF;
}
</style>