如何消除div元素中的负空间及内部文本上方的多余空白

问题根因 #

• 浏览器自带的默认样式会给<h1>标签添加默认上下外边距，顶部的margin-top就是div内部文本上方多余空白的来源
• 你的代码存在标签匹配错误：<h1>的闭合标签错误写为</h2>
• 未做CSS默认样式重置的情况下，body自带的默认边距也可能叠加导致位置偏移

修复方案 #

方案1：全局样式重置（推荐，可统一消除所有浏览器默认样式差异） #

直接替换原有代码为以下内容即可：

<!DOCTYPE html>
<html lang="en">
<head>
  <title> :/</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    h1 {
        color: white;
        font-size: 1000%;
        /* 如需调整文本距离div顶部的距离，可自行修改margin-top的值 */
    }
    div {
        width: 200em;
        height: 110em;
        background-color: red;
    }
  </style>
</head>
<body>
    <div><h1>not workin :(</h1></div>
</body>
</html>

方案2：仅针对性消除h1的顶部边距 #

不需要全局重置的话，仅给h1添加margin-top: 0属性即可：

h1 {
  color: white;
  font-size: 1000%;
  margin-top: 0;
}

同时记得修正闭合标签的错误。

可选：自定义文本在div内的位置 #

如果后续需要灵活调整文本在div内的垂直位置，可给div添加flex布局属性：

div {
  width: 200em;
  height: 110em;
  background-color: red;
  display: flex;
  /* 垂直方向贴顶：flex-start，居中：center，贴底：flex-end */
  align-items: flex-start;
}

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