Comment créer une zone de groupe

Question

J'ai trouvé le code pour créer la boite de groupe :

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

Il est dit de créer la boîte de groupe suivante au moment de l'exécution :

Lorsque je l'exécute dans Visual Studio Code, cela ressemble à ceci :

Les bordures sont à peine visibles et le texte apparaît au mauvais endroit. Est-ce que j'ai fait quelque chose de mal?

Answer 1

Le problème est que tous les navigateurs ont des styles par défaut différents. Votre inhabituel.

J'ai copié des feuilles de style d'agent utilisateur de 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