gpt4 book ai didi

inline - 有没有办法在 CSS 中的内联元素上设置最小行高?

转载 作者:技术小花猫 更新时间:2023-10-29 11:19:18 25 4
gpt4 key购买 nike

我有一些在左侧显示图标的内联链接(填充 + 背景),但是当字体太小时,图像不适合行高并且在顶部和底部被裁剪。有没有办法在不使用 javascript 的情况下防止它发生?我不想以 px 为单位设置字体大小..

一些最小行高设置为非相对值(图像的高度)将是理想的。

最佳答案

在处理 block 元素内的行内元素时,您没有很多选项来更改其边界框的大小。 min-height 对内联元素不起作用,line-height 也不会产生任何影响。

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

作为快速演示,试试这个:

<!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 来避免这个问题,但是这样您的行间距就会不一致,如果它在一个文本 block 中。

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

关于inline - 有没有办法在 CSS 中的内联元素上设置最小行高?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1742525/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com