Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

inline

I have some inline links with icon showing on the left (padding + bacground), but when the font is too small, the image doesn't fit in line height and gets cropped on top and bottom. Is there any way to prevent it from happening, without use of javascript? I don't want to set font size in px..

Some min-line-height set to non-relative value (image's height) would be ideal.

like image 531
saji Avatar asked Nov 16 '09 14:11

saji


3 Answers

You can use min() or max() to create minimum/maximum values on most css properties.

Here is an example that sets the line-height at 10vh or 100px. Whichever one is smallest will be used in the browser. If you use max() it will select whichever property is largest.

line-height: min(10vh, 100px);

          // or //

line-height: max(10vh, 100px);

See min() and max().

like image 111
Quinn Keaveney Avatar answered Sep 22 '22 19:09

Quinn Keaveney


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.

like image 29
Mike West Avatar answered Sep 19 '22 19:09

Mike West


you may be able to use display:inline-block to allow the min-height as inline tags are a little restricted

like image 35
andyface Avatar answered Sep 18 '22 19:09

andyface