Heading elements on same line without breaks - html

Question

I have a line of code which is styled using CSS. I wanted it to appear on a single line.
<style>
.thumb {
text-shadow:2px 2px #FF0000;
white-space: nowrap;
}
.click {
font-style: oblique;
}
</style>
<h2 class="click">
Click a <h3 class="thumb">thumbnail image</h3> to see it enlarged
</h2>
I have tried using the below code:
<h2 class="click">
Click a <span style="text-shadow:2px 2px #FF0000">thumbnail image</span> to see it enlarged
</h2>
It worked but I wanted to know is there any other way to perform this task?

Answer 1

<h3> is a block-level element. If you need to display it on the same line, you should change its default display type to inline or inline-block.
<h2 class="click">
Click a <h3 class="thumb">thumbnail image</h3> to see it enlarged
</h2>
h3.thumb {
text-shadow:2px 2px #FF0000;
white-space: nowrap; /* Is this really needed?? */
display: inline; /* Or inline-block */
}
Also note that, white-space is to handle the white space inside the element; Not around the element itself.

Answer 2

You can specify the display as inline:
<style>
.thumb {
text-shadow:2px 2px #FF0000;
white-space: nowrap;
display: inline;
}
.click {
font-style: oblique;
}
</style>
<h2 class="click">Click a <h3 class="thumb">thumbnail image</h3> to see it enlarged</h2>
However, note that h2 and h3 tags are designed for block-level header hierarchies. For something you want to display within the same line, span is usually more appropriate.
More info on the purpose of heading tags: http://accessibility.psu.edu/headingshtml