有没有办法在CSS中的内联元素上设置min-line-height？ [英] Is there a way to set min-line-height on inline element in CSS?
问题描述
我有一些内嵌链接，图标显示在左边（padding + bacground），但是当字体太小，图像不适合行高，并在顶部和底部裁剪。
有没有办法防止它发生，没有使用javascript？我不想在px中设置字体大小。
一些min-line-height设置为非相对值（图像的高度）将是理想的。 p>
在处理块元素内的内联元素时，您没有很多选项来更改其边框的大小。 min-height 不适用于内联元素， line-height 将不会有任何效果。 p>
设置一个合适的 padding 可能是一个合理的选择，但是你可能遇到元素的背景与其他
作为快速演示，请尝试以下操作：
<！DOCTYPE html>
< html>
< head>
< title>演示< / title>
< style type =text / css>
span {
background：＃0F0;
padding：0.5em 0;
}
< / style>
< / head>
< body>
< p>这是一些演示文本。查看< span> texty< / span>它是。< / p>
< / body>
< / html>
您会看到 texty span垂直扩展，但它将在前一行和后一行重叠文本。您可以在现代浏览器中将元素的显示属性设置为 inline-block ，以避免出现此问题，
我认为你最好的选择，不管喜欢与否，只是为了确保您要应用到链接的图片符合您要显示的文字。
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.
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.
这篇关于有没有办法在CSS中的内联元素上设置min-line-height？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
