为什么 HTML 中 SELECT 的大小比 INPUT 小

Question

我试图创建一个表单，但遇到了一个问题：SELECT 和 INPUT 元素的大小不同。如下：为什么带有 SELECT 元素的 div 比带有 Input 元素的 div 小（您可以看到一个带有“深红色”颜色的小间隙）。

* {
  box-sizing: border-box;
}

.row {
  background-color: crimson;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  background-color: cornflowerblue;
}

.col-1 {
  width: 8.33%;
}

.col-2 {
  width: 16.66%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33%;
}

.col-5 {
  width: 41.66%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33%;
}

.col-8 {
  width: 66.66%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33%;
}

.col-11 {
  width: 91.66%;
}

.col-12 {
  width: 100%;
}

div.addPost form {
  background-color: #F5F9FE;
  width: 100%;
  padding: 1.2rem 1.5rem;
  font-size: 1rem;
}

div.addPost form select {
  font-size: 1rem;
}

div.addPost form [class*="col-"] {
  margin-bottom: 1rem;
}

<form action="" method="get">
  <div class="row">
    <div class="col-6">
      <label for="">Post Title</label>
      <input type="text" maxsize="255">
    </div>
    <div class="col-6">
      <label for="">Post Category</label>
      <select name="" id="">
        <option value="">First</option>
        <option value="">Second</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <label for="">Post Author</label>
      <input type="text" maxsize="255">
    </div>
    <div class="col-6">
      <label for="">Post Category</label>
      <select name="" id="">
        <option value="">Draft</option>
        <option value="">Active</option>
      </select>
    </div>
  </div>
</form>

我已经尝试为两个元素的 font-size 属性分配相同的值，但这不起作用。请解释一下原因。我该如何消除这个差距？

Answer 1

您需要box-sizing:border-box在 INPUT 和 SELECT 中使用，以便考虑边距/填充