css - CSS：为什么只有第一个元素的高度不同？

Question

这里：URL第一个字段是 40 像素高，而所有其他字段都是 30 像素。我不明白这怎么可能。

我想要：

• 纠正和理解问题
• 使所有字段“垂直对齐”（标签不垂直居中）。

非常感谢任何帮助！

Answer 1

在回答你的第二个问题时，给标签一个line-height等于它旁边的输入。你也可以试试：

position: relative;
top: 50%;
bottom: 50%;
line-height: 0;

以获得更一般的风格。只需将它应用到.labels或其他东西上，而不是单独设置每个样式。

Answer 2

以下来自 bootstrap 的 css 在您的输入下方添加 10px 边距：

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
  height: 20px;
  padding: 4px 6px;
  margin-bottom: 10px;
}

我删除了一些东西，但是 20px 的高度加上 8px 的垂直填充，2px 的边框和 10px 的边距底部意味着这将有 40px 的总高度。

覆盖此样式，但添加margin: 0此特定元素。