Question

I am having an issue with line-height on a list item.

In a nutshell, we have a line-height assigned to the body, which the <li> obviously inherits.

If I put a <span> inside the list item and specify a font-size that’s smaller than the standard body font, the <li> keeps the line-height for the document, not for what the span actually is using.

One thing to consider is that I’m very limited with what I can do with regards to the actual HTML, as this is HTML created by the ckeditor (wysiwyg) editor. If you open that editor, create some list items and then change the font size, this is what you get:

<ul>
    <li><span style='font-size:8px'>Item 2 -- and some supporting text</span>
    <li><span style='font-size:8px'>Item 2 -- and some supporting text</span>
    <li><span style='font-size:8px'>Item 2 -- and some supporting text</span>
</ul>​

I can’t really change what it outputs, but of course we can try and use CSS rules to control it.

I put up a jsfiddle that illustrates the issue: http://jsfiddle.net/virtualpromote/pW47c/

If you know of a way to make the <li> to base its line-height on the height of the <span> within it, that would be awesome.

— Javascipt is not an option to solve this problem. The HTML that’s generated is actually passed onto an app that creates a PDF out of it on the fly, so that of course, can’t parse any javascript rules that we could apply after the fact.

Answer 1

John,

Billy Moat has the right idea, something like this will work:

li span { line-height: 10px; display:block; }​

The span tag falls inline with its container element, the li. Changing it to block forces it outside of inline elements, thus not inside the li line-height.

Cheers