How do I remove the extra space above my rendered <div> container in SharePoint Online?

How do I remove the extra space above my rendered container in SharePoint Online? screenshot of extra space above welcome message

See below for container java script code inserted into SharePoint Online page using the JS Modern Script Editor web part:

    <div id="welcomeContainer"; line-height:0px>
      <p id="WelcomeMsg"></p>
      <p id="OurTeam"></p>
      <p id="ThisSite"></p>
      <p id="Excited"></p>
    </div>

    <script type="text/javascript">
      var displayName = _spPageContextInfo.userDisplayName;
      var firstName = displayName.split(" ")[1]; // Extract the first name

      // Set styles for the welcome message
      document.getElementById("WelcomeMsg").style.color = "black";
      document.getElementById("WelcomeMsg").style.fontSize = "25px"; // Set font size
      document.getElementById("WelcomeMsg").style.fontFamily = "Segoe UI, sans-serif"; // Set font    family
      document.getElementById("WelcomeMsg").innerHTML = "Hi " + firstName + ", Welcome!";

    </script>

I tried adding line-height="0" to the container but did not work.

try

const welcomeMessage = document.getElementById("WelcomeMsg");
welcomeMessage.style.marginTop = "0";
welcomeMessage.style.paddingTop = "0";

The space you're seeing is most likely padding or margin. Experiment with what works.

In general a great way to diagnose things like this is with the browser dev tools which you can open in most browsers by pressing F12. If you then push Ctrl, Alt, C you can mouse over the element and it will colour code where the space is coming from. Green is padding, Orange is margin.