Style.display == «none» не работает должным образом

Я работаю над проектом, в котором мне нужно, чтобы определенные элементы были скрыты одним нажатием кнопки. Для этого я использую style.display = "none", который должен скрывать элементы и НЕ занимать место. По какой-то причине, хоть он и скрывает элементы, они все равно занимают скейп — на странице случайные пробелы. Вот как это выглядит:

До скрытия элементов | После того, как элементы скрыты

Примечание. Серый блок — это мой курсор, выделяющий пустое место.

Вот соответствующий код:

Javascript -

function start() {

  tempPlayer1 = document.getElementById("enterName1").value;
  tempPlayer2 = document.getElementById("enterName2").value;
  tempPlayer3 = document.getElementById("enterName3").value;
    
  player.push(tempPlayer1);
  player.push(tempPlayer2);
  player.push(tempPlayer3);

  if (tempPlayer1 == "" || tempPlayer2 == "" || tempPlayer3 == "") {

    document.getElementById("op0").innerHTML = "Please enter a valid name.";
        return;

  } else {
    
        console.info("The first player's name is " + player[1] + ".");
        console.info("The second player's name is " + player[2] + ".");
        console.info("The third player's name is " + player[3] + ".");
        document.getElementById("op0").innerHTML = "op0";
    
  }

  startButton.style.display = "none";
  enterName1.style.display = "none";
  enterName2.style.display = "none";
  enterName3.style.display = "none";
  instructions.style.display = "block";

}

HTML -

<br>
<br>
<br>

<titl id = title style = "text-align:center;">

    𝐒𝐄𝐀 𝐎𝐅 𝐅𝐎𝐑𝐓𝐔𝐍𝐄𝐒

</titl>

<br>
<br>
<br>

<input type = "text" id = "enterName1" value = "" placeholder = "Enter Player 1 name here...">
 
<br>
<br>
    
<input type = "text" id = "enterName2" value = "" placeholder = "Enter Player 2 name here...">
    
<br>
<br>

<input type = "text" id = "enterName3" value = "" placeholder = "Enter Player 3 name here...">
    
<br>
<br>
<br>
    
<button onclick = "start()" id = "startButton" style = "text-align:center;">

    𝐂𝐋𝐈𝐂𝐊 𝐇𝐄𝐑𝐄 𝐓𝐎 𝐒𝐓𝐀𝐑𝐓

 </button>
 
<br>
<br>

Все остальные элементы нажимаются вниз, но я этого не хочу. Как мне его изменить? Я думаю, это связано с тем, что теги
не скрыты, как мне их скрыть?