尽管被设置为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属性处于上述状态之一的输入元素   没有size属性，那么用户代理应该采取行动   好像它有一个用户代理级样式表规则设置宽度   元素上的属性与应用的值相关   将字符宽度转换为像素算法到数字20。

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

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

  

'width'的使用值确定为内联替换   元素......

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

部分

  

如果'height'和'width'都计算出'auto'和。的值   element也有一个固有的宽度，那么内在的宽度就是   使用'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]值以使等式为真......

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

现在我们可以看到如何修复它。我们所要做的就是通过将输入框的内容框宽度设置为跨度的整个宽度，减去填充和边框来停止调整已使用边距右边值的相等性。然后，边距的已使用值将为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>