样式输入和跨度为按钮类，略有不同答案

【问题标题】：Styling input and span as button class, slight difference样式输入和跨度为按钮类，略有不同
【发布时间】：2014-12-20 01:23:39
【问题描述】：

我想让我网站上的所有按钮都遵循平面按钮类，输入按钮或跨度按钮应该完全相同。

我已经应用了相同的类，删除了边框，添加了填充等。但是，使用该元素的按钮看起来比使用表单按钮的按钮稍大。

这是为什么呢？我可以编辑哪些其他 css 属性以使它们看起来相同（除了为所有这些属性设置预设高度之外？）

这是我的按钮类：

.button{
    padding: 10px;
    display: inline;
    border-radius: 2px;
    font-family: "Arial";
    border: 0;
    margin: 0 10px;
    background: red;
    font-size: 15px;    
    line-height: 15px;
    color: white;
    width: auto;
    height: auto;
    box-sizing: content-box;
}

这里是小提琴：http://jsfiddle.net/raphadko/f3293yeL/

【问题讨论】：

Spans are not buttons :)
将可点击的 span 用作按钮是一种不好的做法吗？我应该改用什么？
链接的文章很清楚。 “首先要注意的是，永远不应将 SPAN 用作按钮” 如果要将其用作操作触发器，请使用实际按钮。根本没有使用跨度的具体理由。 - jsfiddle.net/f3293yeL/1
我明白了，谢谢！我没有看到它是一个链接，我想这是公认的答案。

标签： html css

【解决方案1】：

最好的解决方案是将按钮包裹在跨度内。这样，您将完全控制按钮的位置。不要将它们用作表单内的按钮！

span > .button {
    padding: 10px;
    display: inline;
    border-radius: 2px;
    font-family: "Arial";
    border: 0;
    margin: 0 10px;
    background: red;
    font-size: 15px;
    line-height: 15px;
    color: white;
    width: auto;
    height: auto;
    box-sizing: content-box;
}

<form>
   <span>
       <input type="submit" class="button" value="Button1" />
        </span>
  
  <span>
       <input type="submit" class="button" value="Button2" />
        </span>
  
  <span>
       <input type="submit" class="button" value="Button3" />
        </span>
    
</form>

注意：跨度可以帮助您轻松定位元素，但在涉及表单时不建议将其用作按钮。

【讨论】：