Background-color only on the text field - html

Question

this is my code:
HTML:
<div id="hello">
Hello
</div>
CSS:
#hello {
font-size:30px;
background-color:red;
}
As you can see in the fiddle (https://jsfiddle.net/en27xg3b/), the background color is on all the div. I want it to be only where the "Hello" is.
I'm pretty sure it's a simple code, but I forget how to do it.

Answer 1

Use inline-block or inline: https://jsfiddle.net/en27xg3b/1/
#hello {
font-size:30px;
background-color:red;
display: inline-block;
}
<div id="hello">Hello</div>
Or wrap the text in a span: https://jsfiddle.net/en27xg3b/2/
#hello span {
font-size:30px;
background-color:red;
}
<div id="hello"><span>Hello</span></div>

Answer 2

Wrap your text inside a span. Like this
#hello span{
font-size:30px;
background-color:red;
}
<div id="hello">
<span>Hello</span>
</div>

Answer 3

<div> tag is display block so it fill background full.
In this case, You only set display : inline; for <div> tag
Like this https://jsfiddle.net/en27xg3b/4/

Answer 4

I would take a look at http://www.w3schools.com/cssref/tryit.asp?filename=trycss_text_background
but what you can do is have a style
<style>
span.highlight {
background-color:red;
}
</style>
now in your html you can do
<div id="hello">
<span class="highlight">
Hello
</span>
More Text
</div>