CSS表单输入框样式优化：解决聚焦位移与元素间距问题

.form-items input {
  /* 确保所有输入框在默认状态下也拥有3px的边框 */
  border: 3px solid #999; /* 默认边框颜色 */
  padding: 0.5rem; /* 保持内边距 */
}

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

.form-items {
  margin: 10px; /* 为每个表单项（label + input）添加10px的外边距 */
}

*,
*::before,
*::after {
  box-sizing: border-box; /* 确保内边距和边框包含在元素的总宽度和高度内 */
  margin: 0;
  padding: 0;
}

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

body {
  font-size: 1.22rem; /* 页面默认字体大小 */
  line-height: 1.2;
}

.form__wrapper {
  display: grid;
  place-items: center; /* 在页面中心放置表单 */
  height: 100vh;
  width: 100%;
}

form {
  display: flex; /* 使用Flexbox布局表单容器 */
  background: #41ac13fd;
  padding: 5rem 5rem;
}

.form-container {
  display: flex;
  flex-direction: column; /* 表单容器内的表单项垂直排列 */
}

.form-items {
  margin: 10px; /* 为每个表单项（label + input）添加间距 */
}

.form-items input {
  border: 3px solid #999; /* 默认边框宽度3px，颜色#999 */
  padding: 0.5rem; /* 输入框内边距 */
}

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

form,
label,
input {
  display: flex; /* 将这些元素设置为Flex项，方便布局，但需注意其具体作用 */
}

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