链接、按钮和输入具有相同的高度

Question

我希望我的按钮、链接和输入具有相同的样式。我的身高有问题，我无法确定原因。

在这个例子中，我的按钮和我的输入是 30 像素高，但我的链接只有 29 像素。

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 2rem;
}

button, input, a {
  background: none;
  border: 1px solid grey;
  color: black;
  font-size: 1.6rem;
  outline: none;
  padding: 5px;
  text-decoration: none;
}

<button>Hello</button>
<input type="text" placeholder="Hello" />
<a href="#">Hello</a>

这有什么区别？

Answer 1

您需要确保所有元素的字体系列都相同（当前您的锚具有不同的字体），并确保您的元素是块或内联块，否则不会应用填充：

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 2rem;
}

button,
input,
a {
  display: inline-block;
  font-family: arial;
  background: none;
  border: 1px solid grey;
  color: black;
  font-size: 1.6rem;
  outline: none;
  padding: 5px;
  text-decoration: none;
}

<button>Hello</button>
<input type="text" placeholder="Hello" />
<a href="#">Hello</a>