通过统一设置 input 元素的 `padding` 和 `font-size`，可确保用户输入内容与 placeholder 起始位置、字号完全一致，实现视觉对齐。
在构建表单（如倒计时页面的用户信息录入区）时，常遇到输入文本与 placeholder 位置不一致的问题：placeholder 因设置了 padding-left 显示在内边距偏移后的位置，而输入文字默认从左边缘开始渲染，导致视觉错位——例如 placeholder “Name of Recipient” 看似从距离左侧 15px 处显示，但用户输入的第一个字母却紧贴左边界。
根本原因在于：::placeholder 伪元素的样式（如 padding）不会影响实际输入内容的排版；它仅作用于占位符文本本身。真正控制输入文字位置和尺寸的是 <input> 元素自身的 padding 和 font-size 属性。
✅ 正确做法是：将原本写在 ::placeholder 中的 font-size 和 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; /* ← 关键：统一字号，避免大小差异 */
}
.name-box input::placeholder {
color: gray; /* 仅保留语义性样式，如颜色 */
}⚠️ 注意事项：
- 不要对 ::placeholder 设置 padding 或 text-indent，否则会造成“占位符有缩进、输入无缩进”的错觉；
- 若使用 text-align: center 或 right，需确保 padding 值与对齐方式兼容（例如居中时，左右 padding 应相等）；
- 对于 textarea，同样适用该原则——将 padding 和 font-size 应用于 textarea 元素本身，而非 ::placeholder；
- 如需响应式适配，建议用 rem 或 em 定义 padding 和 font-size，便于统一缩放。
这样调整后，用户输入的每个字符都将与 placeholder 文本严格对齐——无论是起始横坐标、基线位置，还是字号大小，真正实现“所见即所得”的表单体验。
