如何为input元素添加左内边距以分隔用户输入文本与元素边框

直接给目标input元素设置CSS的padding-left属性即可，属性值可根据你需要的分隔间距自定义调整。

代码示例 #

全局所有input统一设置 #

input {
  padding-left: 12px;
  /* 其余原有样式保持不变即可 */
}

仅给指定input设置（更灵活，推荐） #

先给input加自定义类名：

<input type="text" class="text-input" placeholder="输入内容">

再写对应样式：

.text-input {
  padding-left: 10px;
  /* 建议加上下面这行，避免padding撑大input的预设宽度 */
  box-sizing: border-box;
}

注意事项 #

• 不推荐用text-indent代替padding-left，前者仅作用于第一行文本，当输入内容长度超过输入框宽度需要滚动时，文本左侧会重新贴紧边框，达不到预期效果
• 如果你设置了box-sizing: border-box，padding值会被包含在你预设的input宽度之内，不需要额外计算宽度补偿

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