Question

在我的按钮标签上（注意：不是输入），我把字符“X”。它看起来很正确。但是，当我添加边框时，我意识到角色并没有真正居中。 >按钮内部似乎有某种填充。

这是可以删除的吗？如果是这样，怎么样？

我尝试添加样式（通常的填充，边距，对齐和 valign ）但是它没有给我任何有用的东西。

<button style='width:18px;height:18px;'>X</button>

Answer 1

在小提琴中，按钮对于文本来说不够高。但是，通过向CSS添加line-height:0可以轻松解决这个问题。

Updated fiddle

请注意，这不会影响“X”在不同浏览器中的位置。替代解决方案可能是使用小写的“x”或乘法符号“×”等或组合来缩小字体大小。

顺便说一下，你说你试过设置保证金，但这绝不是一个解决方案。边距位于按钮的外侧。填充可以工作，但你只能有正面填充，而不是负面。

Answer 2

我尝试解决方案：

通过使用我自己的样式覆盖默认按钮边框样式，将宽度和高度增加1px并指定font-size，我取得了不错的效果。我还在按钮文本周围添加了<span>标签，以便更轻松地设置实际文本的样式。 （我使用<span>，然后将其设为块元素，但<p>或<div>也可以使用。）

（我最大的问题是“你为什么不亲自设置按钮样式，依靠丑陋的默认按钮样式？”。）

HTML：

<button><span class="text">X</span></button>

CSS：

button {
    display: block;
    padding: 0px;
    margin: 0;
    width: 19px;
    height: 19px;
    border: 1px solid #000;
    border-radius: 5px;
}

button span.text {
    font-size: 11px;
    padding: 2px;
}

JSFiddle Example.

Answer 3

在按钮标签内添加一个span标签，然后您可以使用任何属性`

HTML：

  <button type="button"><span class="buttonText">X</span></button>

CSS：

button{
height: 20px;
width: 20px;
}
.buttonText{
  color: blue,
  padding: 10px;
}

在按钮元素内部填充不可移除

3 个答案:

JSFiddle Example.