How do I remove line break sensitivity in html?

Question

I've seen a lot of answers online but they work only for text, here my problem is that the line break somehow creates a space between the boxes. In the snippet I removed the line break before the last input element, and it fixes it, but as I'm going to apply many properties to these input elements, the line would result too long and it would affect the code's legibility. How can I make it ignore the line break? Consider that putting them inside a div with nowrap didn't work, as it's not text.

.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

I would recommend putting them into a div with display:flex; flex-direction:row;