Html 输入高度略大于链接高度

考虑下面的例子

* {
框大小：边框框；}
输入，a{
背景色：红色；
颜色：白色；
边框：.1淡黑色；
填充：1rem；
字号：1rem；
线条高度：1rem；}
a{
文本装饰：无；}

---

发生这种情况是因为您的

a

仍在内联。将其设置为显示为内联块允许

行高

属性显示。您还需要确保它们都在同一个

垂直对齐上

：

*{
框大小：边框框；
}
输入，a{
背景色：红色；
颜色：白色；
边框：.1淡黑色；
填充：1rem；
字号：1rem；
线高：1rem；
垂直对齐：顶部；
}
a{
显示：内联块；
文字装饰：无；
}

---

发生这种情况是因为您的

a

仍在内联。将其设置为显示为内联块允许

行高

属性显示。您还需要确保它们都在同一个

垂直对齐上

：

*{
框大小：边框框；
}
输入，a{
背景色：红色；
颜色：白色；
边框：.1淡黑色；
填充：1rem；
字号：1rem；
线高：1rem；
垂直对齐：顶部；
}
a{
显示：内联块；
文字装饰：无；
}

---

将其添加到ur

a

和

输入

标记中

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

*{
框大小：边框框；
}
输入，
a{
背景色：红色；
颜色：白色；
边框：.1淡黑色；
填充：1rem；
字号：1rem；
线高：1rem；
显示：内联块；
垂直对齐：中间对齐；
}
a{
文字装饰：无；
}

---

将其添加到ur

a

和

输入

标记中

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

*{
框大小：边框框；
}
输入，
a{
背景色：红色；
颜色：白色；
边框：.1淡黑色；
填充：1rem；
字号：1rem；
线高：1rem；
显示：内联块；
垂直对齐：中间对齐；
}
a{
文字装饰：无；
}

---

将它们包装在flex div中

* {
框大小：边框框；}
输入，a{
背景色：红色；
颜色：白色；
边框：.1淡黑色；
填充：1rem；
字号：1rem；
线条高度：1rem；}
a{
文字装饰：无；
左边距：5px；
}

---

将它们包装在flex div中

* {
框大小：边框框；}
输入，a{
背景色：红色；
颜色：白色；
边框：.1淡黑色；
填充：1rem；
字号：1rem；
线条高度：1rem；}
a{
文字装饰：无；
左边距：5px；
}

---

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

显示器：flex

这将使他们保持同样的高度

*{
框大小：边框框；}
.wrapper{display:flex}
输入，a{
背景色：红色；
颜色：白色；
边框：.1淡黑色；
填充：1rem；
字号：1rem；
线条高度：1rem；}
a{
文字装饰：无；
左边距：5px；
}

---

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

显示器：flex

这将使他们保持同样的高度

*{
框大小：边框框；}
.wrapper{display:flex}
输入，a{
背景色：红色；
颜色：白色；
边框：.1淡黑色；
填充：1rem；
字号：1rem；
线条高度：1rem；}
a{
文字装饰：无；
左边距：5px；
}

---

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

将

%示例更改为：

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

在这里，我只额外添加了
font-family:Arial到css
 检查输入和定位标记的字体系列。
默认情况下，输入在示例中具有一些字体样式属性

将
%示例更改为：

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

在这里，我只额外添加了
font-family:Arial到css
 明确设置两个元素
高度的最佳方法，并进行如下更改：

%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
}

要明确设置两个元素的高度，并进行如下更改，请执行以下操作：

%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
}

试着用这个

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

试着用这个

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

这有几个原因：

两者使用的字体不同，因此所有相对单位都被解释/计算为不同的值
输入仍然具有不同的内部高度，这会影响总体高度，最终影响对齐


* {
框大小：边框框；
}
输入，a{
背景色：红色；
颜色：白色；
边框：.1淡黑色；
/*拆下顶部和底部衬垫，并更换为线条高度*/
填充：0 1rem；
线高：3rem；
/*将两个元素的显示属性设置为内联块*/
显示：内联块；
字号：1rem；
/*修复字体系列*/
字体系列：Arial，无衬线；
/*确定线的高度*/
线高：3rem；
/*设置两个图元的垂直对齐方式*/
垂直对齐：居中；
}
a{
文字装饰：无；
}

原因如下：

两者使用的字体不同，因此所有相对单位都被解释/计算为不同的值
输入仍然具有不同的内部高度，这会影响总体高度，最终影响对齐


* {
框大小：边框框；
}
输入，a{
背景色：红色；
颜色：白色；
边框：.1淡黑色；
/*拆下顶部和底部衬垫，并更换为线条高度*/
填充：0 1rem；
线高：3rem；
/*将两个元素的显示属性设置为内联块*/
显示：内联块；
字号：1rem；
/*修复字体系列*/
字体系列：Arial，无衬线；
/*确定线的高度*/
线高：3rem；
/*设置两个图元的垂直对齐方式*/