Adjust CSS border on text content on a block

I have the basis on HTML/CSS on how to strucure a webpage (flex display, inline-block, relative/absolute position & float). Also the block / inline concept.

I would like to center a h1 block with a border which is adjusted with the content inside. Is it possible to do that without using div ? Just using h1 block & CSS (see picture below).

Here the code is the following :

HTML :

<div id="divJoyeux"><h1 id="unJoyeux">Test</h1></div>

CSS :

#divJoyeux
{
    margin: center;
    text-align: center;
}

#unJoyeux
{
    color: orange;
    border: solid;
    display: inline-block;
    text-align: center;
    margin: center;
    border-color: black;
}

I don’t see how it’s possible to do only with h1 block. Thanks !

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I would like to center a h1 block with a border which is adjusted with
the content inside. Is it possible to do that without using div?

Yes.

Using:

• display: block;
• width: min-content;
• margin: 12px auto;

Working Example:

h1 {
  display: block;
  width: min-content;
  margin: 12px auto;
  padding: 6px 12px;
  border: 1px solid red;
}

<h1>Test</h1>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0