gpt4 book ai didi

html - 为什么在没有文本的情况下使用 flex 显示时会忽略行高?

转载 作者:太空宇宙 更新时间:2023-11-04 15:00:42 25 4
gpt4 key购买 nike

flex 显示中没有文本时,样式 line-height 会被浏览器忽略。即使有其他组件,如 inputstext areasline-height 仍然被忽略。

为什么 line-height 被忽略了?

查看运行演示 here .

<html>
<head>
</head>
<body>
<h1 style="line-height: 200px; background: blue; display: flex"><input value="expected large line-height - success." style="width: 250px"/>ALIK</h1>
<h1 style="line-height: 200px; background: red; display: flex"><input value="expected large line-height - FAILURE!!!" style="width: 250px"/></h1>
</body>
</html>

结果: enter image description here

最佳答案

line-height 描述了行框的高度。行盒不能直接存在于 flex 容器内——所有 flex 元素都被 block 化, flex 容器内的任何裸文本都存在于匿名 flex 元素内的行盒中(参见规范的 section 4)。在您的第一个示例中,line-height 适用于该匿名 flex 元素中的行框,并且 input 的大小相应调整。

inputtextarea 元素是替换元素,在这种情况下,根据 section 10.6.2 of CSS2.1 使用它们的固有高度代替(请记住,它们由于是 flex 元素而被阻塞)。因此,如果您的第二个示例中没有任何文本,则 line-height 无法应用,因此将被忽略。

关于html - 为什么在没有文本的情况下使用 flex 显示时会忽略行高?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34703306/

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