Html 同一行数量计数器（+；/-）

我在尝试实现这样的数量计数器时遇到了一些问题

以下是我到目前为止的情况（）

我的问题是，我不断得到随机的空白，它感觉我包装元素的方式是低效的。还有别的办法吗

HTML

<!-- Quantity -->
<div class="quantity-number-v2 clearfix">
  <div class="quantity-wrapper">
    <i class="add-down add-action fa fa-minus"></i>
    <input id="prodQuantity" type="text" name="quantity" value="700" />
    <i class="add-up add-action fa fa-plus"></i>
  </div>
  <div id="stock" class="text-center"></div>
</div>
<!-- /Quantity -->

---

空格是在排列内联元素时产生的（想想句子中的单词——它们之间有空格）。您可以注释掉元素之间的空格以删除空格：

---

哇，这真的很有趣，我注意到如果你把它们放在同一条线上，它也能工作+1

.quantity-number-v2{
  margin: 50px;
  #prodQuantity{
    width: 60px;
    height: 30px;
    border: 1px solid #222;
  }
  i{
    padding: 6.8px 10px;
    border: 1px solid #222;
  }
}