HTML/CSS中使用top属性上移SVG波浪出现下方空白的问题

• 代码存在两处基础排版错误：导航栏的DOM结构错位放置在<head>标签内，未被浏览器正常解析；波浪SVG作为行内元素搭配vertical-align: middle属性，会在元素下方留下基线对齐的默认空隙，导致需要滚动页面才能查看完整图形。
• 用top属性调整位置出现白边的本质：相对定位元素偏移后，原本占据的文档流空间不会被自动收回，无论元素视觉上移动到哪里，原占位区域都会露出页面背景的白色空白。

1. 修正HTML语法结构 #

把错位在<head>里的导航容器移动到<body>的合法DOM位置，保证浏览器能正常渲染：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Index</title>
  <link rel="stylesheet" href="Style.css">
</head>
<body>
  <!-- 从head里移动过来的导航结构 -->
  <div class="container"> 
    <div class="navbar"> 
      <img src="Logo v3@2x.png" class="logo" width="420" height="96">
      <nav>
        <li><a href="">Platform</a></li>
        <li><a href="">FAQ</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li> 
      </nav>
    </div>
  </div> 

  <div class="wave-container">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 320">
      <path fill="#786fdf" fill-opacity="1" d="M0,96L60,112C120,128,240,160,360,160C480,160,600,128,720,106.7C840,85,960,75,1080,85.3C1200,96,1320,128,1380,144L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
    </svg>
  </div>
</body>
</html>

原代码重复写入了两次<title>Index</title>，可以直接删除冗余行。

2. 替换原有CSS逻辑，彻底消除空白 #

修改.wave-container和内部SVG的样式，核心逻辑是让波浪容器脱离正常文档流，避免偏移后留下占位空白；同时把SVG改成块级元素，消弭行内元素的默认空隙：

.wave-container {
  /* 脱离文档流，不会在页面预留初始占位空间，调整位置无残留空白 */
  position: absolute;
  /* 控制波浪整体的垂直落点，数值可按需调整 */
  top: 85vh;
  left: 0;
  width: 100%;
  overflow: hidden;
  background: #FFFFFF;
}
.wave-container > svg {
  /* 块级显示，消除行内元素基线对齐的下方空隙 */
  display: block;
  width: 100%;
  /* 微调SVG在容器内的垂直位置，超出范围的部分会被overflow自动裁切 */
  transform: translateY(20%);
}

• 调整位置的两个核心参数：
  • top值控制波浪在整个页面中的垂直位置，因为容器已经脱离文档流，无论上移还是下移，都不会在原位置留下白色空白区域；
  • transform: translateY()用来精细调整波浪图形在容器内部的垂直偏移，移动后超出容器边界的部分会被overflow: hidden直接裁切，不会产生额外占位。
• 不要给.wave-container设置固定高度，让容器高度完全由内部SVG撑开，进一步压缩冗余空间。

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