html中的行更改css

我有一个带引导的表单：

<form class="form-inline">
          <div class="form-group barkodiK">
            <input type="text" class="form-control barkodi" placeholder="Barkodi">
          </div>
          <div class="form-group produktiK">
            <datalist id='produktet'></datalist>
            <input list="produktet" class="form-control produkti" onkeyup="merrProduktet(this)" placeholder="Produkti">
          </div>
          <div class="form-group pershkrimiK">
            <datalist id='pershkrimiProdukteve'></datalist>
            <input list="pershkrimiProdukteve" class="form-control pershkrimi" placeholder="Pershkrimi">
          </div>
          <div class="form-group cmimiK">
            <input type="text" class="form-control cmimi" readonly placeholder="Çmimi">
          </div>
        </form>

此表格给出了以下结果：

但是，如果我在编辑器行中进行此更改，它也会更改结构：

<form class="form-inline">
          <div class="form-group barkodiK">
            <input type="text" class="form-control barkodi" placeholder="Barkodi">
          </div>
          <div class="form-group produktiK">
            <datalist id='produktet'></datalist>
            <input list="produktet" class="form-control produkti" onkeyup="merrProduktet(this)" placeholder="Produkti">
          </div><div class="form-group pershkrimiK">
            <datalist id='pershkrimiProdukteve'></datalist>
            <input list="pershkrimiProdukteve" class="form-control pershkrimi" placeholder="Pershkrimi">
          </div>
          <div class="form-group cmimiK">
            <input type="text" class="form-control cmimi" readonly placeholder="Çmimi">
          </div>
        </form>

我有一个结果：

---

我甚至不知道为什么这个东西会影响HTML的CSS。有什么帮助吗？

因为表单输入是以内联方式显示的，所以您在第二个文件中删除的额外空间导致输入移动得更近：

</div><div class="form-group pershkrimiK">

如果您需要框之间的空间，则应为：

</div>
<div class="form-group pershkrimiK">

---

当东西以内联方式显示时，元素之间/周围的空白是可见的。

检查CSS-填充、边距以及

.n子项（如果有）。这一定是CSS有问题，因为HTML中没有差异。我们可以看一些CSS吗？我在使用bootstrap？还有其他CSS吗？@Wowsk-HTML中存在差异，但很难找到，因为OP没有调用它。卡勒布·艾比在他的回答中指出了这一点。现在这是有道理的。谢谢你的回答。