Question

I’m trying to "stack" some text, but have one small word inserted among the big words, like so:

THIS
 
IS AN

important

SENTENCE

I have the HTML laid out with the main text in its own class, with the font size at 8em, and a span in the middle for the smaller word. In the CSS, I’ve set up a class for "important":

.important {
    font-size: 0.5em;
    line-height: 0.5em;
}

THIS<br>IS AN<br><span class="important">important</span><br>SENTENCE<br>

…and it’s there, and looks great, BUT the line-height doesn’t seem to take. The word "important" is 0.5em in size, but the line-height is just as tall as the rest of the words, resulting in a giant space after IS AN and before "important".

I’ve tried with the <br> both inside and outside the span, on both sides of "important", like

THIS<br>IS AN<span class="important"><br>important<br></span>SENTENCE<br>

…but I just can’t seem to get the line-height to take. What am I doing wrong?

Answer 1

This is a side-effect of the markup used. Replace the line breaks (<br>) with block-level containers to achieve the desired behavior (stack the words on one another), e.g.:

HTML

<div>THIS</div>
<div>IS AN</div>
<div class="important">important</div>
<div>SENTENCE</div>​

You can also lose the line-height declaration, as it no longer serves a purpose:

CSS

body {
    font-size: 8em;
}
.important {
    font-size: 0.5em;
}​

References

• A live demo on dabblet
• HTML block level elements on Mozilla Developer Network

---

Note: You may use any block level elements, e.g. div containers or p elements. Paragraphs will be more appropriate semantically, but you should be aware of any default styles applied to them such as thick padding, bottom margins etc..