Problem with line-height and align

Question

I have a element and it is possible that it is longer than one line, so i have to set a line-height>1 otherwise it looks crappy. But if i do that, the lines are higher than the text, and the text is centered. So it does not match the top. How can i change the position of the text to the top of the line, or is there another way to get some space between two lines?

Answer 1

Line height by definition centers the font-size within the given line height. If you have a 12px font and a 16px line-height, the text will be centered within the 16px, leaving 2px on both the top and the bottom.

One solution to push this text up while maintaining the line height is to add a negative margin to the element and push it up negatively:

float: left;
margin-top: -2px;

Answer 2

Try this:

<style type="text/css">
.spacer
{
 line-height:1px;
}

.spacer:after
{
 content:".";
 visibility:invisible;
 line-height:1px;
}
</style>

You can increase the line height in the above CSS code there and use it like this:

your line one
<p class="spacer"></p>
your line two