html - CSS 行距：未在元素中应用

Question

我有一个棘手的，至少对我来说，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，这是正确的，而 line-height 为 11px，这是我想要的，但显然不是显示的内容。测量显示显示的行高约为 32px，与小字上方的正文相同。精美印刷品的边距、边框和填充都为零。HTML 和 CSS 使用 validator.nu 和 Jigsaw 进行验证。有来自 Skeleton、Superfish 和 Slick 的样式表链接进来。我已经将它们一一注释掉，错误没有变化。

请告诉我我做错了什么，或者给我一些帮助以进一步调试。

（注意：这仍然是一个开发项目，所以没有启用 TLS 并且图像有水印，因为我还没有授权它们。我知道这两件事必须在“生产”之前完成。）

标签： htmlcss

Answer 1

如果 A在带有已定义或css的 a 中，则由于其显示属性的工作方式而span无法正确显示。您可以将您的更改为 a或，您可以添加到您的 css 类以更改显示行为。line-heightdivfont-sizeline-heightspandivdisplay:block.line

例如

.fine {font-size: 1rem; line-height: 1.1; display:block;}