优化HTML表单样式：解决输入框焦点跳动与元素间距问题

/* 确保所有元素都采用border-box模型，这对于布局稳定性至关重要 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ... 其他通用样式 ... */

/* 为所有文本输入框设置默认边框，宽度与焦点状态保持一致 */
.form-items input[type="text"] {
  padding: 0.5rem;
  border: 3px solid #999; /* 默认边框，宽度3px */
}

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

/* ... 其他样式 ... */

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

/* 为每个表单项容器（包含标签和输入框）添加外边距 */
.form-items {
  margin: 10px; /* 在每个form-items块的四周创建10px的外边距 */
}

.form-items input[type="text"] {
  padding: 0.5rem;
  border: 3px solid #999;
}

.form-items input:focus {
  border: 3px solid #d29e29;
  outline: none;
}

*,
*::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; /* 基于html的font-size计算 */
  line-height: 1.2;
}

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

form {
  display: flex; /* 使form-container水平排列 */
  background: #41ac13fd;
  padding: 5rem 5rem;
}

.form-container {
  display: flex;
  flex-direction: column; /* 使form-items垂直排列 */
}

/* 为每个表单项容器添加外边距，创建间距 */
.form-items {
  margin: 10px;
}

/* 为所有文本输入框设置默认边框，宽度与焦点状态保持一致 */
.form-items input[type="text"] {
  padding: 0.5rem;
  border: 3px solid #999; /* 默认边框 */
}

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

/* 确保form, label, input的display属性，这里可能需要根据具体布局调整 */
/* 如果form-items内部是flex，则input和label的display: flex可能不必要或需更具体 */
/* form,
label,
input {
    display: 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="lastname">LastName</label> <!-- 修正了id和name以避免重复 -->
        <input type="text" name="lastname" id="lastname" value="Lname" placeholder="LastName">
      </div>
    </div>
    <div class="form-container">
      <div class="form-items">
        <label for="email">Email</label> <!-- 修正了id和name以避免重复 -->
        <input type="text" name="email" id="email" value="email@example.com" placeholder="Email">
      </div>
      <div class="form-items">
        <label for="phone">Phone</label> <!-- 修正了id和name以避免重复 -->
        <input type="text" name="phone" id="phone" value="123-456-7890" placeholder="Phone">
      </div>
    </div>
  </form>
</div>