尽管被设置为0，但不想要的边缘突然冒出来

Question

如果我将鼠标悬停在开发面板中的元素上，它会在边距上显示橙色高光，构成上方字段与下方字段之间的差异。由于我正在开发的VM的设置方式，我无法在屏幕截图中捕获它，但请相信我它在那里。但是，在第二张图像上，您可以看到边距设置为0且规则正在使用，而右侧则显示右边距为 - （表示无）。我怎样才能摆脱这个边际？它让我发疯，我一直在玩输入的规则和包含它的元素几个小时，没有运气。

我不能使用第二个输入的样式来帮助，因为那个实际上超出了你所能看到的，它的宽度的最后30％被覆盖了，这就是我想要摆脱所有输入。

输入的CSS：

border: 2px solid #c7d9e7;
border-bottom: none;
border-radius: 2px;
color: $text-black;
display: flex;
flex-grow: 1;
font-family: 'open_sansregular', sans-serif;
font-size: 1em;
font-weight: normal;
margin: 0;
order: 2;
padding: 2px 5px;
width: auto;

父元素的CSS（一个span，其唯一的子元素是输入字段）：

display: block;
overflow: hidden;
position: relative;
text-align: center;

编辑：我的目标是让输入填充父宽度，该宽度一直延伸到底部字段的可见边缘。

Answer 1

tl; dr使用

input {
   width: 100%;
   box-sizing:border-box;
}

---

下面，如果您感兴趣，请完整回答正在发生的事情以及上述解决方案的工作原理。

从多个规范中应用了各种规则，我们需要将它们结合在一起。

首先，让我们确定我们正在讨论的内容。我们有一个span，里面是一个输入控件。

input {
  border: 2px solid #c7d9e7;
  border-bottom: none;
  border-radius: 2px;
  color: black;
  display: flex;
  flex-grow: 1;
  font-family: 'open_sansregular', sans-serif;
  font-size: 1em;
  font-weight: normal;
  margin: 0;
  order: 2;
  padding: 2px 5px;
  width: auto;
}
span {
  display: block;
  overflow: hidden;
  position: relative;
  text-align: center;
}

<span>
  <input type="text">
</span>

而且我相信它是您要问的输入控件右侧的橙色框。你想知道（a）当显示的盒子模型值说它应该是0时，为什么橙色盒子的宽度很大。（b）如何减小这个宽度并使用可用于输入控件的空间。

第一步是要了解每个属性有几个不同的价值阶段。从CSS 2.2，部分6.1 Specified, computed, and actual values我们有Specified，value，Computed值，Used值和Actual值;从CSSOM规范我们也有Resolved Value

您在样式表中写的是指定值。 input { margin-right:0; }表示input元素的margin-right属性的指定值为零。

您在框模型描述中看到的值是Computed值。在这种情况下，这也是零。

橙色框显示Used值的宽度 - 或者可见元素上的margin属性与Used值相同的Resolved值。

因此，问题的（a）部分变为：为什么Used值与Computed值不同？

你已经输入了元素display:flex。这使得元素block-level。

'flex'
   This value causes an element to generate a block-level flex container box.

另外在HTML5规范中，渲染部分Section 10.5.4. The input element as a text entry widget.它说：

如果type属性处于上述状态之一的input元素没有size属性，那么用户代理应该表现得好像它有一个用户代理级样式表规则，将元素的width属性设置为从将字符宽度转换为像素算法到数字20所获得的值。

因此，为输入元素分配了大约20个字符的固有宽度。

在CSS 2.2规范中，我们现在可以看到如何计算输入元素的宽度和周围的宽度。第一节10.3.4 Block-level, replaced elements in normal flow适用：

“宽度”的使用值确定为内联替换元素...

内联替换元素的使用值规则来自10.3.2 Inline, replaced elements节

如果'height'和'width'都具有'auto'的计算值，并且该元素也具有固有宽度，那么该固有宽度是'width'的使用值。

我们已经确定内在宽度为20个字符。

部分10.3.4 Block-level, replaced elements in normal flow继续说：

..然后应用未替换的块级元素的规则来确定边距。

哪个是10.3.3 Block-level, non-replaced elements in normal flow部分，重要的是说对于Used值，这个相等必须包含：

'margin-left'+'border-left-width'+'padding-left'+'width'+'padding-right'+'border-right-width'+'margin-right'=包含块的宽度

你已经创建了span元素display:block，所以span元素是包含块元素。

该等式中的Used值都不是“auto”，因此这些值被称为“过度约束”。这意味着要保持等式，至少有一个Used值必须与Computed值不同。该部分继续说：

...忽略'margin-right'的指定值，并计算[Used]值以使等式为真......

因此，计算出的保证金权利值就是您所看到的橙色框。

现在我们可以看到如何解决它。我们所要做的就是通过将输入框的内容框宽度设置为跨度的整个宽度，减去填充和边框来停止调整已使用边距右边值的相等性。然后，边距的Used值将为0.我们使用

input {
   width: 100%;
   box-sizing:border-box;
}

要么

input {
   width: calc(100% - 14px);
}

input {
  border: 2px solid #c7d9e7;
  border-bottom: none;
  border-radius: 2px;
  color: black;
  display: flex;
  flex-grow: 1;
  font-family: 'open_sansregular', sans-serif;
  font-size: 1em;
  font-weight: normal;
  margin: 0;
  order: 2;
  padding: 2px 5px;
  width: 100%;
  box-sizing:border-box;
}
span {
  display: block;
  overflow: hidden;
  position: relative;
  text-align: center;
}

<span>
  <input type="text">
</span>