如何为login类DIV设置带10px内边距的背景色且不移动元素？

要实现给.login DIV设置背景色且上下左右各留10px间距，同时不改变现有元素位置，可通过伪元素+相对定位的方式实现，具体步骤如下：

核心思路 #

利用.login的相对定位（position: relative）作为伪元素的定位参考，通过伪元素绘制内缩10px的背景层，置于所有内容下方（z-index: -1），既满足背景间距需求，又不干扰原有元素的定位布局。

修改后的完整代码 #

CSS 部分 #

@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
body {
  background-color: #DBE2EF;
  position: fixed;
  margin: 0; /* 移除默认边距，避免影响布局 */
}

/* 新增.login样式 */
.login {
  position: relative; /* 为伪元素提供定位基准 */
  width: 100vw;
  height: 100vh;
}

/* 用伪元素实现内缩10px的背景 */
.login::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background-color: #FFFFFF; /* 可替换为你需要的背景色 */
  z-index: -1; /* 背景层置于内容下方 */
}

.textHead {
  font-family: Lora;
  margin-left: 340px;
  margin-top: 130px;
}

.logintxt {
  font-family: Lora;
  margin-left: 285px;
  margin-top: 50px;
}

.loginemailtxt {
  font-family: Lora;
  border: 1px solid black;
  width: 250px;
  height: 30px;
  margin-left: 285px;
  margin-top: 40px;
  outline: none;
  border-radius: 5px;
}

.loginemailtxt::placeholder {
  color: black;
  padding-left: 3px;
}

.loginpwdtxt {
  font-family: Lora;
  border: 1px solid black;
  width: 250px;
  height: 30px;
  margin-left: -256px;
  margin-top: 130px;
  outline: none;
  border-radius: 5px;
  position: fixed;
}

.loginpwdtxt::placeholder {
  color: black;
  padding-left: 3px;
}

.loginbtn {
  position: fixed;
  margin-top: 220px;
  margin-left: -190px;
  width: 120px;
  height: 40px;
  border-radius: 10px;
  background-color: #3F72AF;
  border: none;
  cursor: pointer;
  font-family: Lora;
}

HTML 部分 #

<div class="container">
  <div class="login">
    <h2 class="textHead">MedConnect</h2>
    <h2 class="logintxt">Log In to Your Account</h2>
    <input type="text" class="loginemailtxt" name="email" placeholder="Email Address">
    <input type="password" class="loginpwdtxt" name="password" placeholder="Password">
    <button class="loginbtn" type="button" name="button">Log In</button>
    <h5 style="margin-top: 230px; margin-left: 310px; font-family: Lora;">Don't have an Account? <u style="cursor: pointer;">Sign Up</u></h5>
    <h6 style="margin-top: 40px; margin-left: 260px; font-family: Lora;">By clicking "Log In", you agree to our <u style="cursor: pointer;">Terms</u> and <u style="cursor: pointer;">Privacy Policy</u></h6>
  </div>
</div>

关键说明 #

• .login设置position: relative后，伪元素的定位会以它为基准，不会影响原有元素的fixed或基于margin的定位。
• 伪元素的top/left/right/bottom: 10px直接实现了背景色与.login边缘的10px间距。
• z-index: -1确保背景层不会遮挡表单内容，原有元素的布局完全不受影响。

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