如何为输入框文本与右侧边框添加间距？左侧已用text-indent实现

你当前用text-indent: 2em只能实现文本开头的左侧缩进，没法控制右侧间距。要实现左右两侧的文本与边框等距，推荐用CSS的padding属性来处理，这是更合适的方案：

• 单独设置左右间距的写法：

input {
  padding-left: 2em;  /* 替代text-indent实现左侧间距 */
  padding-right: 2em; /* 右侧间距，和左侧保持一致 */
}

• 也可以用CSS逻辑属性padding-inline简写，一次性设置左右内边距：

input {
  padding-inline: 2em; /* 同时给左右两侧添加2em的间距 */
}

补充说明 #

text-indent仅针对块级元素的第一行文本做缩进，对于输入框这类控件，虽然能看到左侧有间距，但它本质不是内容和边框的内边距，而且无法实现右侧的间距控制。用padding是直接给输入框的内容区域设置内边距，能让文本和边框的左右距离保持统一，逻辑更清晰，也更符合表单控件的样式规范。

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