CODEWITHSUNDEEP
htmlcss
JeanSibelius
JeanSibelius

Reputation: 1581

Adjusting line-height for different ems in stacked text?

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?

Upvotes: 1

Views: 804

Answers (4)

Eliran Malka
Eliran Malka

Reputation: 16263

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

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..

Upvotes: 2

imakeitpretty
imakeitpretty

Reputation: 2116

I don't know if this is the most kosher way to do it, but I've had success giving negative margins to text like that instead of adjusting line height.

Upvotes: 1

Anthony
Anthony

Reputation: 141

Line height is a tricky thing to control with precision, because of the vagaries in the way different browsers and OS interpret the how the calculation is made. Adam Twardoch wrote about how line height varies with browsers over at webfonts.info, where there's also a more general piece on working with line-height.

Line-height controls aren't really intended for more 'graphic' layouts, but are a part of the designers toolbox for setting legible paragraphs. As Eliran said, use block elements for what you're trying to do. That way you can control positioning far more accurately.

Upvotes: 1

Nathan
Nathan

Reputation: 1143

I usually prefer <p> for adjusting line height. Try something like this:

CSS:

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

HTML:

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

Upvotes: 0

Related Questions