移除输入框右侧内边距：Flex布局多输入框样式问题求助

我来帮你解决这个Flex布局下输入框右侧有多余内边距的问题~ 大概率是浏览器给表单元素加的默认样式在搞鬼，咱们一步步来修复：

1. 精准清除输入框右侧内边距 #

直接给input元素设置padding-right: 0，就能去掉右侧的默认内边距。另外别忘了检查父元素form有没有默认的内边距，它也可能让你误以为是输入框的问题：

.inputSettings > form {
  background: red;
  border: 1px solid yellow;
  flex: 1;
  padding: 0; /* 清除form的默认内边距 */
  margin: 0; /* 可选，清除form的默认外边距 */
}

.inputSettings > form > input {
  width: 165px;
  height: 30px;
  border-radius: 5px;
  padding-right: 0; /* 移除输入框右侧内边距 */
  /* 如果想彻底清除所有内边距，直接写 padding: 0; 就行 */
}

2. 加个全局重置让布局更稳 #

浏览器对很多元素都有默认样式，建议在CSS开头加一段全局重置代码，能避免很多莫名其妙的布局问题，尤其是Flex布局：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 重点！让width包含边框和内边距，不会超出预期宽度 */
}

box-sizing: border-box特别重要，它会让你设置的width:165px完全包含输入框的边框和内边距，不会因为这些额外元素导致布局偏移，完美适配你的Flex布局需求。

完整可运行的代码示例 #

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.inputSettings { 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  max-width: 750px; 
}

.inputSettings > form { 
  background: red; 
  border: 1px solid yellow; 
  flex: 1; 
  padding: 0;
  margin: 0 5px; /* 可选，给表单之间加一点间距，避免挤在一起 */
}

.inputSettings > form > input { 
  width: 165px; 
  height: 30px; 
  border-radius: 5px; 
  padding-right: 0;
}
</style>

<div class="inputSettings">
  <form>
    <label>First Name</label>
    <input type="text" id="fname" name="fname">
  </form>
  <form>
    <label>Last Name</label>
    <input type="text" id="lname" name="lname">
  </form>
</div>

这样修改后，输入框右侧的内边距就会消失，同时Flex布局也能正常工作啦！

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