css - 不需要的边距突然出现，尽管被设置为 0

Question

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

我不能使用第二个输入的样式来提供帮助，因为那个实际上超出了你能看到的范围，覆盖了最后 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 {
  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) 如何减小此宽度并使用可用于输入控件的空间。

第一步是了解每个属性有几个不同的值(value)阶段。来自 CSS 2.2，第 6.1 Specified, computed, and actual values 节我们有指定值、计算值、使用值和实际值；从 CSSOM 规范我们也有 Resolved Value

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

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

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

因此问题的 (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.它说:

If an input element whose type attribute is in one of the above states does not have a size attribute, then the user agent is expected to act as if it had a user-agent-level style sheet rule setting the width property on the element to the value obtained from applying the converting a character width to pixels algorithm to the number 20.

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

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

The used value of 'width' is determined as for inline replaced elements ...

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

If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic width, then that intrinsic width is the used value of 'width'.

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

第10.3.4 Block-level, replaced elements in normal flow继续说:

.. Then the rules for non-replaced block-level elements are applied to determine the margins.

这是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' = width of containing block

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

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

... the specified value of 'margin-right' is ignored and the [Used] value is calculated so as to make the equality true ...

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

现在我们可以看看如何修复它。我们所要做的就是通过将输入框的内容框宽度设置为跨度的全宽，减去填充和边框，来阻止等式调整 Used 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>