CSS how to make the background to have size of content

Question

I attached an image with a text, I want the element background to have the same size as the text, which would be the same size as the highest letter. I cannot find a css property to do it.

This is my expected result:

Answer 1

Just use a span with no padding properties ..

 <span style="background-color:#0000FF; color:#FFF; font-size:26px; padding: 0;"> <a href="" style="color:#FFF; text-decoration:none;"> Our Offer </a> </span>

Answer 2

Two possibilities that occur to me. One is the cleaner one but it still has a slight gap at the top and bottom. The other really has no spacing but is very unflexible.

1 Variant

 .c { display: inline; background-color:blue; color: white; font-size: 34px; }

 <div> <p class="c">Our Offer</p> </div>

2 Variant

 div.relative { position: relative; width: 165px; height: 28px; border: 3px solid #000; background-color: blue; } div.absolute { position: absolute; top: -7px; left: -2px; font-size:34px; color: white; }

 <div class="relative"> <div class="absolute">Our Offer</div> </div>