这个紫色虚线区域的用途是什么？

Question

有谁知道这个紫色区域代表什么？

Answer 1

这是空白区域。例如，您有一个宽度为 100% 的容器，里面有两个 div，其中一个宽度为 50%，另一个宽度为宽度的 40%，这意味着有 10% 的空间是空的...这 10% 将显示在Google 检查员绘制的紫色虚线区域。

Answer 2

它显示了可以扩展文本的可用空间。

您可以在文本后看到这个虚线区域，这意味着它是可以扩展文本的区域

*, html, body {
    box-sizing: border-box;
    margin: 0;
}

div {
    position: relative;
    background-color: lightgreen;
}

button {
  display: flex;
  width: 100px;
}

<div>
    <button>1</button>
</div>