英文:
CSS line-spacing: Not Applied in <span> Element
问题
以下是翻译好的部分：
我有一个对我来说至少是棘手的HTML/CSS问题。这是我目前正在开发的网页的一部分：
(整个页面在这里：http://www.professorbrown.net/，但根据已接受的答案，已进行了更改。)
请注意底部的“细则”与正文具有相同的行间距，我无法修复它。在Chrome、Firefox和Edge中看起来都一样，因此这肯定是我工作中的错误。
CSS如下：.fine {font-size: 1rem; line-height: 1.1;}，标记为<span class="fine">。
使用Chrome和Firefox的检查功能显示字体大小的计算CSS为10px，这是正确的，行高为11px，这是我打算的，但显然不是显示的内容。测量显示的行高约为32px，与细则上方的正文相同。细则的外边距、边框和内边距都为零。HTML和CSS使用validator.nu和Jigsaw进行验证。链接了来自Skeleton、Superfish和Slick的样式表。我已经逐个注释掉它们，但错误没有改变。
请告诉我我做错了什么，或者提供进一步调试的帮助。
（注意：这仍然是一个开发项目，因此未启用TLS，图像带有水印，因为我尚未获得许可。我知道在“生产”之前必须完成这两个事项。）
英文:
I have an intractable, at least for me, HTML/CSS problem. Here is a bit of a web page I'm currently developing:
(The whole page is here: http://www.professorbrown.net/ but has now been changed as suggested in the accepted answer.)
Note that the "fine print" at the bottom has the same line spacing as the body copy, and I can't fix it. It looks the same in Chrome, Firefox, and Edge, so it has to be an error in my work.
The CSS is: .fine {font-size: 1rem; line-height: 1.1;} The markup is <span class="fine">.
Using the inspector function of both Chrome and Firefox shows the computed CSS for font-size as 10px, which is correct, and the line-height as 11px, which is what I intended, but clearly not what's displayed. Measurement says the displayed line height is about 32px, which is the same as the body copy above the fine print. Margin, border, and padding for the fine print are all zero. HTML and CSS validate using validator.nu and Jigsaw. There are style sheets from Skeleton, Superfish, and Slick linked in. I've commented them out one by one with no change in the error.
Please tell me what I've done wrong or give me some help with further debugging.
(Note: This is still a development project, so TLS is not enabled and the images have watermarks because I haven't licensed them yet. I know both things must be done before "production.")
答案1
得分: 4
一个span不会正确地继承line-height，这是因为它的display属性的工作原理，如果它位于具有定义的font-size或line-height的div内。您可以将您的span更改为div，或者您可以将display:block添加到您的.line的CSS类中以更改显示行为。
例如：
.fine {font-size: 1rem; line-height: 1.1; display:block;}
英文:
A span won't take on line-height correctly due to how its display property works if it is inside a div with defined font-size or line-height css. You can either change your span to a div or, you can add display:block to your .line's css class to change the display behavior.
e.g.
.fine {font-size: 1rem; line-height: 1.1; display:block;}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论