CSS表单布局优化：避免输入框焦点跳动与实现合理间距

/* 确保所有输入框在默认状态下也拥有固定宽度的边框 */
.form-items input {
  padding: 0.5rem; /* 保持内边距 */
  border: 3px solid #999; /* 默认边框，宽度与聚焦时相同 */
}

/* 聚焦时只改变边框颜色，不改变宽度 */
.form-items input:focus {
  border: 3px solid #d29e29; /* 聚焦边框，宽度与默认时相同 */
  outline: none; /* 移除浏览器默认的焦点轮廓 */
}

/* 为每个表单项（包含label和input的div）添加外边距 */
.form-items {
  margin: 10px; /* 在每个表单项的上下左右创建10px的间距 */
}

<div class="form__wrapper">
  <form action="">
    <div class="form-container">
      <div class="form-items">
        <label for="firstname1">FirstName</label>
        <input type="text" name="firstname1" id="firstname1" value="Fname" placeholder="FirstName">
      </div>
      <div class="form-items">
        <label for="lastname1">LastName</label>
        <input type="text" name="lastname1" id="lastname1" value="Lname" placeholder="LastName">
      </div>
    </div>

    <div class="form-container">
      <div class="form-items">
        <label for="firstname2">FirstName</label>
        <input type="text" name="firstname2" id="firstname2" value="Fname" placeholder="FirstName">
      </div>
      <div class="form-items">
        <label for="lastname2">LastName</label>
        <input type="text" name="lastname2" id="lastname2" value="Lname" placeholder="LastName">
      </div>
    </div>
  </form>
</div>

/* 全局重置样式 */
*,
*::before,
*::after {
  box-sizing: border-box; /* 确保padding和border不增加元素总宽度/高度 */
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%; /* 设置基础字体大小，方便rem单位计算 */
  font-family: Arial, Helvetica, sans-serif;
}

body {
  font-size: 1.6rem; /* 1.6rem = 16px */
  line-height: 1.5;
}

/* 整体表单容器居中 */
.form__wrapper {
  display: grid;
  place-items: center;
  min-height: 100vh; /* 确保至少占满视口高度 */
  width: 100%;
  background-color: #f0f0f0; /* 增加背景色以便观察效果 */
}

/* 表单本身样式 */
form {
  display: flex; /* 使form-container水平排列 */
  background: #41ac13fd;
  padding: 3rem; /* 调整表单内边距 */
  border-radius: 8px; /* 增加圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 增加阴影 */
}

/* form-container 垂直排列其内部的form-items */
.form-container {
  display: flex;
  flex-direction: column;
  /* 如果需要form-container之间有间距，可以在这里添加margin-right */
  /* margin-right: 20px; */
}

/* 每个表单项（label + input）的样式 */
.form-items {
  margin: 10px; /* 在每个表单项之间创建10px的间距 */
  display: flex; /* 使label和input水平排列 */
  flex-direction: column; /* 让label和input垂直排列在form-items内部 */
}

/* label 样式 */
.form-items label {
  margin-bottom: 5px; /* label和input之间的间距 */
  color: #fff;
  font-weight: bold;
}

/* 输入框样式 */
.form-items input[type="text"] {
  padding: 0.8rem 1rem; /* 调整内边距 */
  border: 3px solid #999; /* 默认边框，与聚焦时宽度相同 */
  border-radius: 4px; /* 输入框圆角 */
  font-size: 1.4rem;
  width: 200px; /* 固定输入框宽度 */
}

/* 输入框聚焦时的样式 */
.form-items input:focus {
  border: 3px solid #d29e29; /* 聚焦时只改变边框颜色 */
  outline: none; /* 移除浏览器默认的焦点轮廓 */
  box-shadow: 0 0 5px rgba(210, 158, 41, 0.5); /* 增加聚焦时的阴影效果 */
}

/* 确保form, label, input的display属性设置合理 */
/* 这里的设置需要根据具体布局调整，通常input默认是inline-block */
/* 如果form-items内部label和input需要垂直排列，则form-items应该为flex-direction: column */
/* 而form, label, input本身不需要强制display: flex;除非有特定布局需求 */
/* 原始代码中 form, label, input { display: flex; } 可能会导致意外布局，已在上方示例中修正 */