html - 输入高度略大于链接

Question

考虑下面的例子

https://jsfiddle.net/gq5bru8d/1/

 

* {
  box-sizing: border-box; }

input, a {
  background-color: red;
  color: white;
  border: .1rem solid black;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1rem; }

a {
  text-decoration: none; }

  

<input type="text" placeholder="Input">
<a href="#">Anchor</a>

虽然input和anchor标签都有相同的font-size、line-height、padding和border，输入的高度似乎比 anchor 标签大 1px。为什么会这样？如何才能使它们具有相同的尺寸？

Answer 1

将它们包裹在一个 flex div 中。

 

* {
  box-sizing: border-box; }

input, a {
  background-color: red;
  color: white;
  border: .1rem solid black;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1rem; }

a {
  text-decoration: none;
  margin-left: 5px;
 }

  

<div style="display: flex;">
<input type="text" placeholder="Input">
<a href="#">Anchor</a>
</div>

另一种解决方案。将此样式添加到两个元素 font: 13.3333px Arial

 

* {
  box-sizing: border-box; }

input, a {
  background-color: red;
  color: white;
  border: .1rem solid black;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1rem;
  font: 13.3333px Arial;

 }

a {
  text-decoration: none;
  margin-left: 5px;
 }

  

<input type="text" placeholder="Input">
<a href="#">Anchor</a>