この紫色の破線部分の目的は何ですか? 質問する

要素を拡張できる利用可能なスペースを表示します。

例：

これは 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>