Hero Section无法全屏显示且与About区块存在间隙求助

• 清除全局默认边距与盒模型干扰
  给全局元素添加统一重置规则，避免浏览器默认的margin/padding影响布局：

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

  同时单独检查Hero、About区块内的文本元素（如h1、p），移除它们自带的默认margin，比如设置margin: 0;。

• 排查自定义line-height与负margin的冲突
  临时注释掉Hero Section内元素的自定义line-height和负margin属性，确认间隙是否消失：

  • 如果是line-height导致，尝试用height或min-height替代line-height控制元素垂直间距，或者调整line-height为整数倍的字体大小，避免元素高度溢出。
  • 如果必须保留负margin，给Hero Section父元素添加overflow: hidden;，防止子元素的负margin向外扩散影响后续区块。

• 改用Flexbox自动适配剩余高度
  放弃手动计算calc(100dvh - 90px)的方式，用Flexbox做页面整体布局，彻底避免高度计算误差：

  body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }
  header {
    height: 90px;
    /* header的其他样式 */
  }
  .hero-section {
    flex: 1;
    /* Hero的其他样式 */
  }
  

  这种方式下，Hero会自动占满header之外的剩余屏幕空间，不会出现间隙。

• 统一浏览器样式解析
  添加基础的浏览器样式重置规则，消除不同浏览器对line-height、margin的解析差异：

  html, body {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
  }
  

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