10

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

一些 min-line-height 设置为非相对值（图像的高度）将是理想的。

4

3 回答 3

9

在处理块元素内的内联元素时，您没有很多选项可以更改其边界框的大小。 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以避免此问题，但随后会出现不一致的行间距，如果它位于文本块内，这几乎肯定会分散注意力。

我认为你最好的选择，不管你喜欢与否，只是确保你想应用到你的链接的图像适合你将要显示的文本。

于 2009-11-16T14:47:38.573 回答
1

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

于 2009-11-16T14:48:43.907 回答
1

您可以使用 min() 或 max() 在大多数 css 属性上创建最小值/最大值。

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

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

          // or //

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

见min()和max()。

于 2020-04-16T21:21:54.330 回答