尽管设置为 0，但不知何故出现了不需要的边距

Question

如果我将鼠标悬停在开发面板中的元素上，它会在边缘上显示橙色突出显示，从而弥补上方字段和下方字段之间的差异。由于我正在开发的虚拟机的设置方式，我无法在屏幕截图中捕获它，但请相信我它就在那里。然而，在第二张图片中，您可以看到边距设置为 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;

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

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

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

Answer 1

tl;dr 使用

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

如果您感兴趣，下面是正在发生的事情以及上述解决方案为何有效的完整答案。

我们需要将多个规范应用的各种规则结合在一起。

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

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

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;
}

我相信您要问的是输入控件右侧的橙色框。您想知道 (a) 为什么当显示的框模型值应为 0 时，橙色框的宽度较大。(b) 如何减小此宽度并使用可用于输入控件的空间。

第一步是了解每个房产都有几个不同的价值阶段。根据 CSS 2.2 第6.1 节“指定值、计算值和实际值”，我们有“指定值”、“计算值”、“已使用值”和“实际值”；从 CSSOM 规范中我们也得到了解析值

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

您在盒模型描述中看到的值是计算值。在本例中，该值也为零。

橙色框显示“已使用”值的宽度 - 或“已解析”值，对于可见元素上的边距属性，该值与“已使用”值相同。

因此问题的 (a) 部分变成：为什么使用值与计算值不同？

您已经制作了输入元素display:flex。这使得元素成为块级的。

'柔性'
   该值使元素生成块级弹性容器框。

同样在 HTML5 规范的渲染部分第 10.5.4 节中。作为文本输入小部件的输入元素。它说：

如果 type 属性处于上述状态之一的输入元素没有 size 属性，则用户代理的行为就像具有将元素上的 width 属性设置为的用户代理级样式表规则一样通过将字符宽度转换为像素算法应用到数字 20 获得的值。

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

在 CSS 2.2 规范中，我们现在可以看到输入元素及其周围的宽度是如何计算的。第 10.3.4 节正常流程中的块级替换元素适用：

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

内联替换元素的使用值规则来自第10.3.2 内联替换元素

如果“height”和“width”都具有“auto”的计算值，并且该元素还具有固有宽度，则该固有宽度是“width”的使用值。

我们已经确定固有宽度为 20 个字符。

第 10.3.4节正常流程中的块级替换元素继续说道：

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

这是第10.3.3 节“正常流程中的块级、非替换元素”，重要的是，对于“已使用”值，此等式必须成立：

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

您已经创建了 span 元素display:block，因此 span 元素是包含块元素。

该等式中所有使用的值都不是“自动”，因此这些值被称为“过度约束”。这意味着要使相等成立，至少一个“已使用”值必须与“计算”值不同。该部分接着说：

...忽略“margin-right”的指定值并计算[Used]值以使等式成立...

因此，计算出的右边距值就是您所看到的橙色框所示的值。

现在我们可以看看如何修复它。我们所要做的就是通过将输入框的内容框宽度设置为跨度的完整宽度（减去填充和边框）来阻止相等性调整已使用的边距右值。那么边距的“Used”值将为 0。为此，我们使用

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

或者

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

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

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