width of <h*> element flows 100% always - html

Question

When setting the background color of a <H1> tag(or any <H*> tag) the element spans the length of the body element of the HTML page.
<H1>A</H1>
H1
{
background: #ddd;
}
The following image shows the problem and ideal result
I can get the desired effect by statically setting the width of the <H1> tag in the css like
H1
{
background: #ddd;
width: 10px;
}
The problem with this is that if I have text inside the <H1> tag that is bigger than 10px it will overflow the background.

Answer 1

h1 elements use display: block, which is the correct default behavior. It prevents subsequent content from appearing on the same line, and allows borders and backgrounds to be the (appropriate) full width of the content region.
If you need the element to only take the width of the text, use one of the following methods:
an inner element such as <h1><span>h1</span></h1> so that you can select the inner element to provide the background.
span {
background-color: #CCC;
}
<h1><span>h1</span></h1>
display: inline if you want the heading to be treated as inline text and flow appropriately.
h1 {
background-color: #CCC;
display: inline;
}
<h1>h1</h1>
<!-- here's where this fails -->
<h1>h1 again</h1>
display: inline-block if you want the heading to have the features of a block element (such as being able to set padding, height, and width)
h1 {
background-color: #CCC;
border: 1px solid #000;
display: inline-block;
padding: 2px 3px;
}
<h1>h1</h1>
<!-- here's where this fails -->
<h1>h1 again</h1>
float: left; clear: both; if you want the heading to align to the left, but ignore other floated elements. The issue with this one is that it will no longer collapse margins.
h1 {
background-color: #CCC;
clear: both;
float: left;
}
<h1>h1</h1>
<h1>h1 again</h1>

Answer 2

No need to set the width. Just update the display type from block to inline or inline-block, if needed.
Something like this:
h1.ib {
display: inline-block;
}
Fiddle: http://jsfiddle.net/v3f2obr1/

Answer 3

You can control the layout mode of the elements with the display property.
However, there is a problem: most values that make the box shrink to its content instead of growing to cover the container block are inline-level, e.g. inline-block, inline-table, inline-flex. That means that, if there is other inline content around your headers, they will be displayed in the same line (if they fit).
Probably, you don't want that. Then, you can use display: table:
h1 {
display: table;
background-color: #CCC;
}
Before
<h1>h1</h1>
Middle
<h1>h1 again</h1>
After
The table display is block-level, so the header will be in a different line than surrounding inline content. But unlike block, the contents are layed out using the table layout, so the header will shrink to its content.

Answer 4

Edit: Jack Pattishall and zzzzBov beat me to it.
You don't actually have to set the width. There's a CSS property available for solving your problem. display:inline
An inline element only takes up as much width as necessary.
Just set your heading to this.
h1 {
display: inline;
}

Answer 5

Here's a byte-saving way to do it:
H1 {
display: inline;
background-color: #CCCCCC;
}
<h1>Your Text Here</h1><br>