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

【问题标题】：What is the purpose of this purple dashed line area?这个紫色虚线区域的用途是什么？
【发布时间】：2021-07-18 23:26:26
【问题描述】：

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

【问题讨论】：

看起来像可用空间。包裹按钮的 html 和 css 是什么样的？

标签： css google-chrome-devtools

【解决方案1】：

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

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

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

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

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

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

【讨论】：

它是一个按钮元素，用“位置：相对”div包裹。并且按钮有“display: flex”
@DonKim 是的，它是可以展开按钮文本的可用区域。请看我更新的答案
我花了一分钟才弄清楚是什么在这里创建了“可用空间”。据我所知，它是由元素的固定或最小高度/宽度生成的空间，并且文本内容没有完全填满（与任何填充或边距相反）。跨度>

【解决方案2】：

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

【讨论】：