如何删除html中的换行敏感性？ [重复]

Question

此问题已经在这里有了答案：

How do I remove the space between inline-block elements?（39个答案）

Removing whitespace between HTML elements when using line breaks（16个答案）

关闭5分钟前。

我在网上看到了很多答案，但它们仅适用于文本，这里的问题是换行符以某种方式在两个框之间创建了一个空格。在代码段中，我删除了最后一个输入元素之前的换行符，并对其进行了修复，但是由于我要将许多属性应用于这些输入元素，因此行的生成时间过长，并且会影响代码的可读性。如何让它忽略换行符？考虑到将它们放在带有nowrap的div中是行不通的，因为它不是文本。

.box {
  width: 1em;
  height: 1em;
  padding: 0px;
  margin: -1px;
  border: 2px solid black;
}

<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" /><input type="text" class="box" />

Answer 1

选项1：

进行输入display：block和float：left

.box {
  width: 1em;
  height: 1em;
  padding: 0px;
  margin: -1px;
  border: 2px solid black;
  display: block;
  float: left;
}

<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" />
<input type="text" class="box" /><input type="text" class="box" />

选项2：

使输入的容器具有font-size：0px，但给输入一个普通的font-size

.box {
  width: 1em;
  height: 1em;
  padding: 0px;
  margin: -1px;
  border: 2px solid black;
  font-size: 16px;
}

.container {
  font-size: 0px;
}

<div class="container">
  <input type="text" class="box" />
  <input type="text" class="box" />
  <input type="text" class="box" />
  <input type="text" class="box" />
  <input type="text" class="box" />
  <input type="text" class="box" />
  <input type="text" class="box" /><input type="text" class="box" />
</div>

Answer 2

我建议将它们与div一起放入display:flex; flex-direction:row;