通过将字体大小和内边距样式从 placeholder 伪元素移至 input 元素本身，可确保用户输入的文本与 placeholder 文字起始位置、字号完全一致，实现视觉对齐。
在构建表单（如倒计时页面的用户信息录入区域）时，常遇到输入内容与 placeholder 文字错位的问题：placeholder 显示在左侧带缩进的位置，而用户输入却紧贴输入框左边缘，破坏视觉一致性与用户体验。
根本原因在于：::placeholder 中设置的 padding 和 font-size 仅作用于占位符文本本身，并不影响实际输入内容的排版；而输入文字默认继承 input 元素的 padding 和 font-size。若未显式为 input 设置这两项，则浏览器使用默认值（通常 padding: 0、font-size: 16px），导致与自定义 placeholder 偏移。
✅ 正确做法是：将 font-size 和 padding-left（或其他方向的 padding）统一定义在 input 选择器中，而非 ::placeholder：
.name-box input {
width: 100%;
height: 40px;
margin: 10px 0 10px 0;
padding: 0 0 0 15px; /* ← 关键：统一控制文字起始横坐标 */
border: none;
outline: none;
border-radius: 15px;
font-size: 18px; /* ← 关键：确保输入文字与 placeholder 字号一致 */
}
.name-box input::placeholder {
color: gray;
/* 不再设置 font-size 或 padding —— 避免样式冲突 */
}⚠️ 注意事项：
- padding-left: 15px 会同时作用于 placeholder 和用户输入，保证二者水平对齐；
- 若需垂直居中，可配合 line-height: 40px（与 height 一致）或使用 display: flex + align-items: center（需调整盒模型）；
- 对于 <textarea>，同样适用该原则：将 font-size 和 padding 应用于 textarea 元素本身；
- 避免在 ::placeholder 中设置 padding，它在部分浏览器中可能被忽略或引发渲染异常。
这样修改后，无论 placeholder 是否显示，用户输入的文字都会自然出现在与占位符完全相同的位置，显著提升表单的专业性与可用性。
