为什么 "inspect element" 在悬停时显示输入元素的宽度为 100%，但它的实际宽度更小？

Question

悬停在输入元素上时橙色带延伸至整个屏幕宽度。但是在开发工具中显示的元素的实际宽度仅为 169px。如果橙色带不代表宽度，那么它代表什么？

如果我将鼠标悬停在标签字段上，橙色宽度也会占据整个宽度，但现在在开发工具中显示的宽度是 820px。为什么会出现这种差异？

请注意，我已将 display:block 分配给所有 input 和 label 字段。

Answer 1

这是由于输入在 css 中有 display: block:

A block-level element always starts on a new line. A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

Attribution

将 CSS 更改为 display: inline-block 不会导致这种情况。

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

<input type="text" class="block" placeholder="block"><span>more text</span>
<br>
<input type="text" class="inline-block" placeholder="inline-block"><span>more text</span>
<p>Use dev-tools to see the difference...

Answer 2

元素本身只有这么宽，但它的渲染块是全宽的（如橙色矩形所示）。渲染块占用的space本质上是预留的。如果您要在之后添加另一个输入，它会换行。

<form>
    <input type="text" value="blocked!" style="display: block;" />
    <input type="text" value="dropped!" /> 
    <input type="text" value="not dropped!" />
</form>

为什么 "inspect element" 在悬停时显示输入元素的宽度为 100%，但它的实际宽度更小？

Why "inspect element" shows input element's width as 100% on hovering, but its actual width is less?

html

css

google-chrome-devtools