开发Project Odin注册表单时网站顶部出现空白，请求排查根源

核心问题1：Flex布局结构错误 #

你的.main容器设置了flex-direction: row，但右侧的.upper、.form、.finish没有被包裹到你已经定义好的.formScreen容器中，导致这三个元素和左侧.leftScreen在同一行排列，配合align-items: center的设置，右侧内容被垂直居中，直接造成顶部空白。

核心问题2：多余的DOM闭合标签 #

HTML末尾多了一个</div>，对应<div class="main">的闭合标签重复，会导致DOM结构异常，间接影响布局渲染。

额外问题：定位与边距导致高度溢出 #

.finish中的<h3>使用position: absolute脱离文档流，加上.accountBtn设置了过大的margin-bottom: 100px，导致页面底部额外多出空白，整体高度超出预期。

修复后的HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Login Form</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Alata&amp;display=swap" rel="stylesheet" />

  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="main">
    <div class="leftScreen">
      <div class="logoBox">
        <div class="logo"></div>
      </div>
    </div>

    <!-- 用formScreen容器包裹右侧所有内容 -->
    <div class="formScreen">
      <div class="upper">
        <div class="upperText">
          This is not a real online service! You know you need something like this in your life to help you realize your deepest dreams.
          <br />Sign up <em>now</em> to get started.<br />
        </div>
        <br />
        <div class="lowerText">You <em>know</em> you want to.</div>
      </div>

      <div class="form">
        <h2>Let's do this!</h2>
        <form action="#" method="get">
          <div class="row">
            <div>
              <label for="firstName"> First Name </label>
              <input type="text" id="firstName" name="firstName" /> <!-- 修正无效input类型 -->
            </div>

            <div>
              <label for="lastName">Last Name</label>
              <input type="text" id="lastName" name="lastName" /> <!-- 修正无效input类型 -->
            </div>
          </div>

          <div class="row">
            <div class="email">
              <label for="email">Email</label>
              <input type="email" id="email" name="email" />
            </div>

            <div class="phoneNumber">
              <label for="phoneNumber">Phone Number</label>
              <input type="tel" id="phoneNumber" name="phoneNumber" />
            </div>
          </div>

          <div class="row">
            <div class="password">
              <label for="password">Password</label>
              <input type="password" id="password" name="password" />
            </div>

            <div class="pc">
              <label for="confirmPassword">Confirm Password</label>
              <input type="password" id="confirmPassword" name="confirmPassword" />
            </div>
          </div>
        </form>
      </div>

      <div class="finish">
        <button class="accountBtn">Create Account</button>
        <h3>
          Already have an account?<a class="login" href="/login"> Log In</a>
        </h3>
      </div>
    </div>
  </div>
</body>

</html>

修复后的CSS代码 #

* {
  font-family: "Alata", sans-serif;
  margin: 0;
  padding: 0; /* 重置默认padding */
  box-sizing: border-box; /* 统一盒模型计算方式 */
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1rem;
}

.main {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  min-height: 100vh; /* 确保容器占满视口高度 */
}

.leftScreen {
  background-image: url("bg.jpg");
  background-size: cover;
  height: 100vh;
  width: 34%;
}

.logoBox {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 15vh;
  margin-top: 165px;
}

.logo {
  background-image: url("logo.png");
  background-size: cover;
  background-color: transparent;
  height: 30vh;
  width: 300px;
  margin-bottom: 40px;
}

.formScreen {
  width: 66%;
  background-color: #f9fafb;
  display: flex;
  flex-direction: column; /* 让内部元素垂直排列 */
}

.upper {
  display: flex;
  align-items: flex-start; /* 修正无效属性值left */
  justify-content: center;
  flex-direction: column;
  height: 35vh;
  width: 100%;
}

.upperText {
  font-size: 1.5rem;
  margin-top: 50px;
  margin-left: 40px;
  width: 75%;
}

.lowerText {
  font-size: 1.5rem;
  margin-left: 40px;
}

.form {
  font-size: 1rem; /* 修正空格错误 */
  height: 30vh;
  width: 100%;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.row {
  display: flex;
  margin-left: 40px;
  margin-top: 10px;
  gap: 80px;
}

input {
  width: 200px;
}

label {
  display: block;
}

.form h2 {
  margin-top: 20px;
  margin-left: 40px;
}

.finish {
  display: flex;
  align-items: flex-start; /* 修正无效属性值left */
  justify-content: flex-start;
  flex-direction: column;
  height: 35vh;
  width: 100%;
  padding-top: 30px; /* 用内边距替代margin优化布局 */
}

.accountBtn {
  background-color: rgb(89, 108, 72);
  font-size: 1rem;
  color: white;
  border-radius: 10px;
  border: 0;
  width: 200px;
  height: 45px;
  margin-left: 40px;
  margin-bottom: 20px; /* 调整底部边距避免溢出 */
}

.finish h3 {
  margin-left: 40px;
  /* 移除绝对定位，让元素回到文档流 */
}

.login {
  color: green;
  text-decoration: none;
}

额外修复说明 #

1. 修正了HTML中无效的input类型：firstName和lastName不是标准输入类型，改为text。
2. 修正了CSS中无效的flex属性值：align-items: left改为align-items: flex-start，left并非flex布局的有效值。
3. 新增全局box-sizing: border-box和padding重置，避免浏览器默认样式干扰布局计算。
4. 调整.finish的布局逻辑，移除绝对定位让元素正常参与文档流，避免高度计算异常。

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