如何创建分组框

Question

我找到了用于创建组框的代码：

<fieldset>
    <legend>Title</legend>
</fieldset>

据说它在运行时创建了以下组框：

当我在 Visual Studio Code 中运行时，它看起来像这样：

边框几乎不可见，并且文本出现在错误的位置。我做错了什么吗？

Answer 1

问题是所有浏览器都有不同的默认样式。你的不寻常。

我从 MacOS+Chrome109 复制了一些用户代理样式表

fieldset {
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    min-inline-size: min-content;
    border-width: 2px;
    border-style: groove;
    border-color: rgb(192, 192, 192);
    border-image: initial;
}

legend {
    display: block;
    padding-inline-start: 2px;
    padding-inline-end: 2px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
}

Title