Question

考虑以下示例

 

* {
  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，但输入的高度似乎比锚标记高1px。为什么这样，你怎么能这样做，所以他们都有相同的尺寸？

Answer 1

将它们包裹在flex div中。

＆＃13;

 

* {
  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;
 }

＆＃13;

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

＆＃13;

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

＆＃13;

 

* {
  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;
 }

＆＃13;

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

＆＃13;

Answer 2

如果您不介意使用flex在输入和锚点周围使用包装，并且设置为

显示：挠曲

它会使它们的高度相同。

* {
  box-sizing: border-box; }
  
  .wrapper{display:flex}

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 class="wrapper">
<input type="text" placeholder="Input">
<a href="#">Anchor</a>
</div>

Answer 3

这有几个原因：

您没有对两者使用相同的字体，因此所有相关单位都被解释/计算为不同的值。
输入仍然有不同的内部高度，它与整体高度混淆，最终会对齐。

 

* {
  box-sizing: border-box;
}

input, a {
  background-color: red;
  color: white;
  border: .1rem solid black;
  /* Remove the top and bottom padding and replace with line height */
  padding: 0 1rem;
  line-height: 3rem;
  /* Set both elements' display property to be inline-block */
  display: inline-block;
  font-size: 1rem;
  /* Fix the font family */
  font-family: Arial, sans-serif;
  /* Fix the line height */
  line-height: 3rem;
  /* Set the vertical alignment for both elements */
  vertical-align: center;
}

a {
  text-decoration: none;
}

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

Answer 4

将此添加到您的a和input代码

  display: inline-block;
  vertical-align: middle;

* {
  box-sizing: border-box;
}

input,
a {
  background-color: red;
  color: white;
  border: .1rem solid black;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1rem;
  display: inline-block;
  vertical-align: middle;
}

a {
  text-decoration: none;
}

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

Answer 5

检查输入和锚标记的字体系列。默认情况下，输入在您的示例中具有一些字体样式属性。

将%example更改为：

%example {
  background-color: red;
  color: white;
  border: .1rem solid black;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1rem;
  font-family: Arial;
}

在这里，我只向css添加了font-family: Arial;。

Answer 6

要明确设置元素height并进行以下更改，请执行以下操作：

%example {
  background-color: red;
  color: white;
  border: .1rem solid black;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1rem;
  height: 50px; // Keyline
  display: inline-block; // without this line height not apply properly
  vertical-align: top; // This line making alignment perfectly
}

Answer 7

尝试使用此...

* {
  box-sizing: border-box; }

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

a {
  text-decoration: none; }

Answer 8

这种情况正在发生，因为您的a仍然是内嵌的。将其设置为显示为内联块允许line-height属性通过。您还需要确保它们都在同一个vertical-align：

* {
  box-sizing: border-box;
}

input, a {
  background-color: red;
  color: white;
  border: .1rem solid black;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1rem;
  vertical-align: top;
}

a {
  display: inline-block;
  text-decoration: none;
}

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

输入高度略大于链接

8 个答案: