由于文本内容，html 按钮上方有多余的空格

Question

所以我在下面有以下代码。

.innerDiv1 {
  display: inline-block;
  width: 45%;
  border-right: 1px solid;
  padding-right: 5px
}

.innerDiv2 {
  display: inline-block;
  width: 45%;
  padding-left: 5px;
}

.inner2 {
  border: 1px solid black;
  
}

.rect {
  width: 0%;
  height: 20px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: black;
  font-size: 12;
}

.sendreceiveBtn {
  height: 25px;
  width: 100%;
  font-size: 12px;
  max-height: 25px;
  
}

<div>
  <div class="inlineItems" id="progBtnBar">
    <div class="innerDiv1">
      <div class="inner2">
        <div id="myProgress">
          <div class="rect">0%</div>
        </div>
      </div>
    </div>
    <div class="innerDiv2">
      <button class=sendreceiveBtn>Transmit</button>
    </div>
  </div>
</div>

我需要将一个按钮与另一个 div 垂直排列，两者都作为 inline-block 在另一个 div 中，所以它们最终彼此相邻，最好是完全相同的大小。但是，有关按钮的某些东西将其向下推了一点。到目前为止，除了增加按钮中文本的字体外，我所做的一切都无法改变这一点。是什么造成了这个空间，我怎样才能让它们排成一行？

Answer 1

这是罪魁祸首:

.rect {
  line-height: 30px;
}