css 边距不适用于此右侧答案

【问题标题】：css margin not applying for this right sidecss 边距不适用于此右侧
【发布时间】：2022-11-22 23:34:04
【问题描述】：

我想在此输入字段的右侧应用填充，但它不起作用这就是我想在左侧向右侧添加边距的样子

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

input {
  width: 100%;
  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);
}

<html>

<body>
  <input type="text" id="input" />
  <button id="save">Save input</button>
  <button id="save">Save input</button>
</body>

</html>

【问题讨论】：

我们也可以看到你的 html 吗？
请添加适当的 HTML 和 CSS 代码，因为现在，我们没有 HTML 来查看发生了什么，并且您的 CSS 在开始时被切断了。您还应该使用 Stack Overflow 内置的“实时预览”功能通过浏览器演示您的代码，而不是屏幕截图。
我们没有看到您的完整 CSS
我已经添加了 HTML，这是完整的 css
margin添加元素的宽度/高度，这就是为什么你看不到它工作并且也创建水平滚动的原因。您可以为 input 做的是将宽度设置为 width: calc(100%-10px) 以获得所需的效果。或者在输入周围添加一个环绕元素以在右侧添加填充。

标签： html css

【解决方案1】：

margin添加元素的宽度/高度，这就是为什么你看不到它工作并且也创建水平滚动的原因。您可以为输入做的是将宽度设置为 width: calc(100% - 10px) 以获得所需的效果。或者在输入周围添加一个环绕元素以在右侧添加填充。

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

input {
  width: calc(100% - 10px);
  box-sizing: border-box;
  padding: 10px;
  margin-top: 10px;
  margin-left: 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);
}

<body>
  <input type="text" id="input" placeholder="not wrapped" />
  <div class="input-wrap">
    <input type="text" id="input-wrapped" placeholder="wrapped" />
  </div>
  <button id="save">Save input</button>
  <button id="save">Save input</button>
</body>

【讨论】：

我认为左右边距应该是(100% - 2* 10px)
@Cédric 不需要左边距，因为 body padding 可以做到这一点。此外，2*10px 只会使输入减少 20px，并在右侧缩短 10px。
我们可能理解不同的需求，我猜 OP 希望它的 div 以左右空间为中心

【解决方案2】：

您的保证金有效，但您设置了输入 width: 100%，因此您的 div 比正文大。

您可以使用 calc() 将您的 div 放入其容器中

:root {
  --input-margin: 10px;
}

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

input {
  width: calc(100% - 2 * var(--input-margin));
  box-sizing: border-box;
  padding: 10px;
  margin-top: var(--input-margin);
  margin-left: var(--input-margin);
  margin-right: var(--input-margin);
  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 type="text" id="input" />
<button id="save">Save input</button>
<button id="save">Save input</button>

【讨论】：