Why does line wrapping in code affect page appearance?

Question

css

Hello. The question arose: why such a code:
<button ></button><input>
And such a code:

<button ></button>
<input>

give different results? This refers to the space between the button and the input that appears in the second case. Can this be fixed somehow and should it be like this?

Answer 1

button and input have display: inline-block by default, so they behave somewhat like plain text on the page, hence:
merged
text separate text

Answer 2

Because spaces and line breaks are also characters and they count. The document needs somewhere to store the information that "there are 2 spaces and here is a line break" so it stores it :)

Answer 3

Why this is so, has already been written above. You can fix this with a zero font size - but it's better to just use the first option.

Answer 4

You can also write

<button ></button><!--
--><input>

and the reasons have already been written