Why is the size of SELECT smaller than INPUT in HTML

Question

I was trying to create a form where I faced an issue: The size of SELECT and INPUT element are different. In the following: why is the div with SELECT element smaller than the div with Input element (You can see a small gap with 'crimson' color).

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

I already tried assigning the same value to the font-size property for both the elements but that does not work. Please explain the reason for this. How do I remove this gap ?

Answer 1

You need to use box-sizing:border-box in the INPUT and SELECT so that margin/padding is taken into account