Is there a way to set min-line-height on inline element in CSS?

When dealing with inline elements inside block elements, you don't have a lot of options for changing the size of their bounding box. min-height doesn't work on inline elements, and line-height won't have any effect.

Setting an appropriate padding might be a reasonable option, but you'll likely run into issues with the element's background overlapping other elements inside the containing block.

As a quick demo, try this:

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <style type="text/css">
            span {
                background: #0F0;
                padding:    0.5em 0;
            }
        </style>
    </head>
    <body>
        <p>This is some demo text.  Look at how <span>texty</span> it is.</p>
    </body>
</html>

You'll see that the background of the texty span expands vertically, but it'll overlap text on preceding and following lines. You could set the element's display property to inline-block in modern browsers to avoid this issue, but then you'll have inconsistent line spacing, which would almost certainly be distracting if it's inside a block of text.

I think your best option, like it or not, is simply to ensure that the image you'd like to apply to your links fits the text you'll be displaying.

Tags:

Css

Inline

Recent Posts