css 网站顶部白色空白区域找不到来源？

我正在创建一个项目odin目前的注册表，并审查我的代码后，有一个莫名其妙的白色差距是约100px高，我无法找到问题的来源.这是造成问题，我，因为它是造成网站的其余部分出现较长的时间，然后它应该是.请帮助我审查我的代码，以查明导致屏幕上的白色差距的错误.谢谢

* {
  font-family: "Alata", sans-serif;
  margin: 0;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1rem;
}

.main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

.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;
}

.upper {
  display: flex;
  align-items: 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: 1 rem;
  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;
  /* this will make children elements to be placed in one row*/
}

input {
  width: 200px;
}

label {
  display: block;
}

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

.finish {
  display: flex;
  align-items: left;
  justify-content: center;
  flex-direction: column;
  height: 35vh;
  width: 100%;
}

.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: 100px;
}

.finish h3 {
  margin-left: 40px;
  margin-bottom: 20px;
  position: absolute;
}

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

<!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&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>

    <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="firstName" id="firstName" name="firstName" />
          </div>

          <div>
            <label for="lastName">Last Name</label>
            <input type="lastName" id="lastName" name="lastName" />
          </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 网站顶部白色空白区域找不到来源？

1条答案

相关问题

热门标签

最新问答