如何为输入框文本与边框之间添加内边距（padding）-html教程-PHP中文网

如何为输入框文本与边框之间添加内边距（padding）

通过为元素设置 padding 并配合 box-sizing: border-box，可轻松在文本内容与边框之间创建视觉留白，提升可读性与表单美观度。

通过为 `` 元素设置 `padding` 并配合 `box-sizing: border-box`，可轻松在文本内容与边框之间创建视觉留白，提升可读性与表单美观度。

在 Web 表单设计中，输入框内文本紧贴边框（尤其是默认 padding: 0 时）会显著降低可读性和专业感。解决该问题的核心方法是合理使用 CSS 的 padding 属性，并确保盒模型行为符合预期。

✅ 正确做法：用 `padding` 控制内边距，用 `box-sizing: border-box` 保证尺寸稳定

padding 直接定义内容区（即文字）与边框之间的空白区域。例如：

.myInputs {
  border: 1px solid black;
  width: 100%;
  height: 100%;
  padding: 8px 12px; /* 上下 8px，左右 12px —— 推荐起始值 */
  box-sizing: border-box; /* 关键！确保 padding 不撑大元素总尺寸 */
}

⚠️ 注意：若未设置 box-sizing: border-box，默认的 content-box 模式会使 width: 100% 仅指内容宽度，加上 padding 后实际总宽将超出容器，导致布局错位（尤其在 Flex 布局中易引发换行或溢出）。因此，全局重置盒模型是最佳实践：

* {
  box-sizing: border-box;
}

? 优化结构：避免内联样式，语义化类名

原代码中使用了 style="display: flex; gap: 25px;" 等内联样式，不利于维护和复用。建议提取为语义化类名，例如：

<div class="form-header">
  <div class="label">Datum</div>
  <div class="label">ZUSTÄNDIGER MITARBEITER</div>
</div>
<div class="form-row">
  <div class="field-col left-column"><input id="datum" class="input-field"></div>
  <div class="field-col right-column"><input id="mitarbeiter" class="input-field"></div>
</div>

对应 CSS（精简清晰）：

.form-header,
.form-row {
  display: flex;
  gap: 25px;
}

.form-row {
  margin-bottom: 15px;
}

.field-col {
  height: 40px;
}

.left-column { width: 530px; }
.right-column { width: 460px; }

.input-field {
  width: 100%;
  height: 100%;
  padding: 8px 12px;
  border: 1px solid #000;
  font-size: 14px;
  line-height: 1.4;
  /* 可选：移除默认 outline，增强聚焦体验 */
  outline: none;
  transition: border-color 0.2s;
}

.input-field:focus {
  border-color: #007bff;
}

? 小贴士

推荐最小内边距：水平 padding ≥ 10px、垂直 padding ≥ 6px，确保光标与边框有足够呼吸感；
一致性优先：所有表单控件（<input>、<select></select>、<textarea></textarea>）应统一 padding 和 box-sizing；
无障碍考虑：适当 padding 还能增大点击/触摸热区，提升移动端体验；
不要用 text-indent 替代 padding：它仅偏移文字，不增加可交互区域，且对多行输入无效。