Question

我有一些带有图标的内联链接显示在左侧（padding + bacground），但是当字体太小时，图像不适合行高并在顶部和底部被裁剪。有没有办法防止它发生，不使用JavaScript？我不想在px中设置字体大小。

某些最小线高设置为非相对值（图像高度）将是理想的。

Answer 1

处理块元素中的内联元素时，没有很多选项可以更改其边界框的大小。 min-height不适用于内联元素，line-height不会产生任何影响。

设置合适的padding可能是一个合理的选择，但是您可能会遇到元素背景与包含块内其他元素重叠的问题。

作为快速演示，试试这个：

<!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>

您会看到texty范围的背景垂直扩展，但它会重叠前后行上的文字。你可以在现代浏览器中将元素的display属性设置为inline-block以避免这个问题，但是你会有不一致的行间距，如果它在一个文本块中，几乎肯定会分散注意力。< / p>

我认为您最好的选择，无论喜欢与否，只是为了确保您要应用于链接的图片符合您要显示的文字。

Answer 2

你可以使用display:inline-block来允许最小高度，因为内联标签有点受限制

Answer 3

您可以使用min（）或max（）在大多数CSS属性上创建最小值/最大值。

这里是将行高设置为10vh或100px的示例。浏览器将使用最小的那个。如果使用max（），它将选择最大的属性。

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

          // or //

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

请参见min()和max()。

有没有办法在CSS中的内联元素上设置min-line-height？

3 个答案: