为什么按钮和锚点具有相同样式的不同宽度

Question

我认为应用于<button>和<a>元素的CSS相同，但是宽度不同。他们都是display:flex

有人知道为什么<a>与<button>的大小不同吗？

以下是代码：https://codepen.io/anon/pen/WqGveO

.btn {
  height: 43px;
  padding: 0 25px;
  background: white;
  color: #54565a;
  border: 2px solid #54565a;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 900;
  font-family: 'Helvetica';
  font-size: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}

<div class="page-section__inner">
  <button class="btn">Standard Button</button>
  <button class="btn btn--centered">Centered Button</button>
  <a href="#0" class="btn">Standard Btn as a</a>
  <a href="#0" class="btn btn--centered">Centered Button as a</a>
</div>