CSS输入框右侧margin不生效问题求助

问题原因 #

你给input设置了width: 100%，同时添加了margin-left:10px和margin-right:10px，此时input的总宽度（内容宽度+左右margin）会超出父容器body的宽度，浏览器会自动挤压右侧margin来让元素适应容器，导致右侧margin无法正常显示。

解决方法 #

方法一：调整input宽度计算逻辑

移除width: 100%，改用自适应宽度配合最大宽度限制，确保元素不会超出容器：

body {
  margin: 0;
  padding: 10px;
}

input {
  width: auto;
  max-width: calc(100% - 20px); /* 减去左右margin总和，避免超出容器 */
  box-sizing: border-box;
  padding: 10px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  border: solid #5f9341 1px;
  border-radius: 30px;
}

#save {
  width: 100px;
  padding: 10px;
  margin-top: 4px;
  margin-left: 10px;
  border: none;
  background-color: #5f9341;
  font-weight: bold;
  color: white;
  text-transform: uppercase;
  border-radius: 30px;
}

#save:active {
  transform: scale(0.98);
}

方法二：用容器padding替代input的左右margin（更推荐）

给input嵌套一个容器，通过容器的padding实现左右间距，避免宽度计算冲突：

<html>
<body>
  <div class="input-wrapper">
    <input type="text" id="input" />
  </div>
  <button id="save">Save input</button>
  <button id="save">Save input</button>
</body>
</html>

body {
  margin: 0;
  padding: 10px;
}

.input-wrapper {
  margin-top: 10px;
  padding: 0 10px; /* 容器的padding实现左右间距 */
}

input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: solid #5f9341 1px;
  border-radius: 30px;
}

#save {
  width: 100px;
  padding: 10px;
  margin-top: 4px;
  margin-left: 10px;
  border: none;
  background-color: #5f9341;
  font-weight: bold;
  color: white;
  text-transform: uppercase;
  border-radius: 30px;
}

#save:active {
  transform: scale(0.98);
}

两种方法都能让input右侧获得和左侧一致的间距，方法二更适合后续布局扩展，减少宽度计算的潜在问题。

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