网页文本上下间距不均问题求助：已尝试margin、padding清零无效

问题根源 #

1. 内容未垂直居中：默认情况下body是块级流式布局，内容从顶部开始排列，不会自动垂直居中，导致视觉上顶部出现空白、中间文本偏离中心。
2. 字体/行高导致的多余空白：即使全局设置了margin:0和padding:0，浏览器默认的line-height（通常为1.1~1.5）以及部分字体本身的字形留白，仍会让文本元素上下产生额外间距。

具体解决代码 #

调整布局实现垂直居中+统一间距 #

修改body和html的CSS，通过flex布局实现内容居中，并统一元素间距：

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%; /* 让容器占满整个视口高度 */
    background-color: var(--bgColor);
    color: var(--txtColor);
    font-family: "myFont";
    font-size: calc(15px + 0.390625vw);
    scroll-behavior: smooth;
    /* 用flex实现垂直+水平居中 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 统一元素间的间距，可根据需求调整数值 */
    gap: 1.2rem;
}

h1 {
    color: var(--txtColor);
    font-size: 3rem;
    /* 消除字体自带的上下留白，让行高与字体高度匹配 */
    line-height: 1;
}

p {
    /* 同样设置行高，避免额外间距 */
    line-height: 1;
}

针对字体内置留白的额外处理 #

如果是自定义字体本身存在过多上下留白，可进一步微调：

h1, p {
    /* 用transform微调位置，数值根据字体实际情况调整 */
    transform: translateY(-0.1em);
}

效果验证 #

使用你提供的HTML代码测试：

<html>
  <body>
    <h1>Text bla bla bla</h1>
    <p>Text</p>
    <h1>Text bla bla bla</h1>
  </body>
</html>

调整后内容会垂直居中，元素间间距统一，顶部的空白问题也会解决。

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