headers Block size

Question

So guys, I’d like help here with css.

For example:

I have an H3

<h3> Bem Vindo ao Portal do Cliente </h3>

When I go to the browser, I have the text and the box of H3.

What I wanted was to get the box in H3 the size of the text. That is, that width was limited to the end of the text automatically without having to report a size in pixels.

Remove that blank space after text.

You can do it?

You may notice that I have put width with small size but the H3 box remains large although the text has shrunk. Note that after the text there is a colored part until the end of the line.

Answer 1

Try it like this:

header{
   border: 1px solid black;
   border-radius: 10px;
   float: left;
}
h3{
   display: inline;
}

<header>
    <h3>Bem Vindo ao Portal do Cliente</h3>
  </header>

Or so:

header{
   border: 1px solid black;
   border-radius: 10px;
   float: left;
}

<header>
    <h3>Bem Vindo ao Portal do Cliente</h3>
  </header>

Answer 2

h3 {
  float: left;
}

<h3> Bem Vindo ao Portal do Cliente </h3>

Answer 3

I saw that they already gave the correct answer. But there was no explanation for what happened.

H3 has a standard display: block; so that it serves as a header occupying the entire space of the line so that your text starts below it. So even if you decrease its width, it will still occupy all the space with margin (orange).

So two options, if you make a point h3, although I don’t see why it would be necessary, it would be or do as indicated to you with a float: left;, because that way you would make it float to the left and release its edge, or change the display to inline, because then it would be treated like any text and not take up all the space.