Geek Answers Handbook

Is there a way to set the minimum line height in an inline element in CSS?

I have built-in links with an icon on the left (padding + bacground), but when the font is too small, the image does not fit the line height and is cropped above and below. Is there a way to prevent this without using javascript? I do not want to set the font size in px.

Some minimum line height set to a non-relative value (image height) would be ideal.

+6
css inline
source share
2 answers

When working with inline elements inside block elements, you do not have many options for resizing the bounding box. min-height does not work on inline elements, and line-height will have no effect.

Setting the appropriate padding may be a smart option, but you will most likely run into problems when the background of an element overlaps other elements inside the containing block.

As a quick demo, try the following:

 <!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 will see that the background of the texty range expands vertically, but it overlaps the text in the previous and next lines. You can set the element display property to inline-block in modern browsers to avoid this problem, but then you will have an inconsistent line spacing, which will almost certainly be distracting if it is inside a block of text.

I think your best option, like this or not, is simply to ensure that the image you want to apply to your links matches the text you will be displaying.

+7
source share

you can use display:inline-block to allow a minimum height, since inline tags are a bit limited.

0
source share

More articles:


All Articles