如何让输入框输入内容与placeholder位置保持一致？

问题出在你仅给占位符（::placeholder）设置了左侧内边距，但输入框本身未配置内边距，导致输入文本起始位置和占位符错位。

修复方案 #

给输入框（input）添加与占位符相同的padding-left值，让输入文本和占位符保持对齐。同时建议统一处理所有表单控件（包括textarea），保证样式一致性：

修改后的CSS代码 #

.name-box {
  width: 100%;
}

.name-box input,
.date-box input,
.message-box textarea {
  width: 100%;
  margin: 10px 0;
  border: none;
  outline: none;
  border-radius: 15px;
  padding-left: 15px; /* 关键：添加左侧内边距，与placeholder对齐 */
  box-sizing: border-box; /* 防止内边距撑大输入框宽度 */
}

/* 适配输入框与文本域的高度差异 */
.name-box input,
.date-box input {
  height: 40px;
}

.message-box textarea {
  min-height: 120px;
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
}

.name-box input::placeholder,
.date-box input::placeholder,
.message-box textarea::placeholder {
  font-size: 18px;
  color: gray;
}

核心说明 #

1. padding-left:15px：让输入文本与占位符的起始位置完全匹配
2. box-sizing:border-box：确保输入框设置width:100%时，内边距不会导致元素超出父容器范围
3. 统一所有表单控件样式，避免重复代码，同时让整个表单视觉风格更协调

内容的提问来源于stack exchange，提问作者Gwen