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" />

https://stackoverflow.com/questions/588356/why-does-the-browser-renders-a-newline-as-space — epascarello, Apr 07 '20 at 20:16
@HereticMonkey I've already tried it and it doesn't work, but don't worry, someone's already answered me and I fixed it :) — Giulio Cusenza, Apr 07 '20 at 20:23
Just add extra div and make it flex like: .container {display:flex;} — Vova, Apr 07 '20 at 20:27

score 1 · Answer 1 · edited Apr 07 '20 at 20:23

Option 1:

Make the inputs display:block and 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" />

Option 2:

Make the inputs' container have font-size:0px but give the inputs a normal 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>

@G-Cyrillus the HTML comment method isn't one I would recommend, as in some IDEs (such as Visual Studio), when you format your code, it puts the comment on another line, defeating the purpose of the comment to eat up the white space — Pershing, Apr 07 '20 at 20:24

score 1 · Accepted Answer · answered Apr 07 '20 at 20:17

1

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

answered Apr 07 '20 at 20:17

Ceyhun Aslan

152
4

Thank you a lot! It worked, I'll accept your answer as soon as the system lets me :) – Giulio Cusenza Apr 07 '20 at 20:20
@GiulioCusenza beware of using flex, it doesn't work in IE versions less than 11 – Pershing Apr 07 '20 at 20:22

How do I remove line break sensitivity in html?

2 Answers2

Option 1:

Option 2: