css - 为什么高度文本框小于按钮？

Question

为什么文本框的高度小于按钮？

我的代码:

 #container {
  overflow: auto;
  line-height: 100%;
  border: 1px solid red;
}
.t,#but {
   float: left;
}
#but ,.txt {
   border: 1px solid #999;
   padding: 10px; 
   font-size: 20px;  
}

<div id="container">
 <div class="t">
 <input type="text" class="txt" name="">
 </div>
 <div id="but"><span>Search</span></div>
</div>

Answer 1

<input>元素，是被替换元素之一，在 CSS 中，一个 replaced element是一个元素，其表示形式超出了 CSS 的范围。它有一些来自浏览器用户代理样式表的特殊样式，它们默认不被继承，例如font-family , font-size , line-height等等，这些规则可以确定盒子的高度。

您可以通过设置 <property>: inherit; 强制它们被继承，所以 <input type="text">可以从 <div class="t"> 继承这些样式及其 parent <div id="container">等等，所以它将能够获得与 <div id="but"> 相同的样式, 以使它们具有相同的高度。

您可以直接在输入框上设置那些特定的样式，但是使用继承可以防止覆盖规则。

#container {
  font-size: 20px;
  overflow: auto;
}

.t,
#but {
  float: left;
}

.txt {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.txt,
#but {
  border: 1px solid #999;
  padding: 10px;
}

<div id="container">
  <div class="t">
    <input type="text" class="txt" name="">
  </div>
  <div id="but"><span>Search</span></div>
</div>

此外，您将使用 <button>标记而不是 <div>我认为真实情况下的按钮。要使输入字段和按钮具有相同的高度，您还需要设置相同的 padding。直接为他们提供值(value)。

#container {
  font-size: 20px;
  overflow: auto;
}

.t,
#but {
  float: left;
}

.txt,
#but {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  border: 1px solid #999;
  padding: 10px;
}

<div id="container">
  <div class="t">
    <input type="text" class="txt" name="">
  </div>
  <button id="but"><span>Search</span></button>
</div>