如何移除SharePoint Online中渲染的<div>容器上方的多余空白？

首先纠正你代码里的写法错误：line-height:0px不能直接作为div的独立属性，必须放在style属性内，这是你设置无效的原因之一。除此之外，还需要处理p标签默认边距、脚本编辑器Web部件自带间距等问题，以下是具体解决方案：

1. 修正容器写法并清除元素默认边距 #

p标签本身带有默认上下margin，容器也可能存在默认padding/margin，直接修改代码如下：

<div id="welcomeContainer" style="margin:0; padding:0; line-height:1.2;">
  <p id="WelcomeMsg" style="margin:0; padding:0;"></p>
  <p id="OurTeam" style="margin:0; padding:0;"></p>
  <p id="ThisSite" style="margin:0; padding:0;"></p>
  <p id="Excited" style="margin:0; padding:0;"></p>
</div>

<script type="text/javascript">
  var displayName = _spPageContextInfo.userDisplayName;
  var firstName = displayName.split(" ")[1]; // 提取用户名字

  // 设置欢迎消息样式
  const welcomeMsg = document.getElementById("WelcomeMsg");
  welcomeMsg.style.color = "black";
  welcomeMsg.style.fontSize = "25px";
  welcomeMsg.style.fontFamily = "Segoe UI, sans-serif";
  welcomeMsg.innerHTML = "Hi " + firstName + ", Welcome!";
</script>

2. 覆盖脚本编辑器Web部件的默认样式 #

现代脚本编辑器Web部件自带默认padding，可通过自定义CSS强制覆盖：
在div容器前添加样式块：

<style>
  #welcomeContainer {
    margin-top: -16px !important; /* 根据实际空白大小调整数值 */
    padding-top: 0 !important;
  }
  #welcomeContainer p {
    margin: 0 !important;
  }
</style>

3. 检查页面节（Section）的布局设置 #

如果以上方法无效，编辑页面后选中包含脚本编辑器的节，打开右侧属性面板，将“内边距”设置为0，同时取消节的最小高度限制。

内容的提问来源于stack exchange，提问作者Dan