a，input，button标签制作按钮，同样的样式为何差异这么大？

Question

以前做项目时用button写按钮样式，发现跟a标签写的按钮样式存在差异。

于是制作了一个demo如下图：

代码：

  <a href="">a标签</a>

  <input type="button" value="input标签">

  <button>button标签</button>

    a, input, button {
      display: block;
      margin: 0;
      padding: 0;
      width: auto;
      height: 80px;
      line-height: 80px;
      background: #ff9c40;
      color: #fff;
      border: none;
      box-sizing: content-box;
      outline: none;
      text-decoration: none;
      align-items: stretch;
      user-select: none;
      white-space: pre;
      -webkit-touch-callout: none;
      -webkit-appearance: none;
    }

奇怪的事情粗线啦，css尽可能的重置为一致，表现差异仍然很大。

实际效果的原因，不能指定width的值；但在设置了display: block的情况下，width应该不须设置就表现的一致才合理吧？

请教一下为何会有这些差异，能通过css让这些标签表现一致吗？

Answer 1

这三个标签有不同的默认样式。如果想表现一致，可以先把input，button 清除默认样式。

Answer 2

样式哪里不一样，就宽度不一样，后面两个设置成display：block只是让他换行，不能改变自身是inline-block的特性，所以要靠内容撑开宽度

Answer 3

因为这几个标签有着不同的默认样式

Answer 4

我个人习惯是都用div来写按钮，避免各个浏览器的默认样式。花这么大的力气去清除默认样式，还不如直接用div写呢。

Answer 5

新增a标签属性 a{display:inline-block;}试试，不知道是不是你想要的效果

a, input, button {      
 ......
}
a {display:inline-block;}