CSS 段落的行高太高答案

【问题标题】：CSS Line-height of paragraph too highCSS 段落的行高太高
【发布时间】：2015-09-11 16:07:45
【问题描述】：

我遇到了包含 span 元素的段落的高度问题：

这是 HTML 的设置：

<div class="container" id="container">
    <div id="captionRegion" class="captionRegion" 
     style="left: 10%; top: 10%; width: 80%; height: 80%; 
            align-items: flex-end; background-color: rgb(0, 128, 0);">
       <div class="paragraph" style="justify-content: center; text-align: center; 
                   background-color: rgb(255, 0, 0); line-height: initial;">
          <div class="innerContainer">
              <span style="color: rgb(255, 255, 255); font-size: 38.4px; 
                           font-family: monospace; background-color: rgb(0, 0, 0);">
                One line Subtitle.
              </span>
          </div>
       </div>
    </div>
</div>

CSS：

.container{
width:160vh; /* 16:9 */
height:90vh; /* 16:9 */
position: absolute;
display: flex;
overflow: hidden;
margin: 0;
font-size: 6vh;
}

.captionRegion{
position: absolute;
z-index: 2147483647;
margin: 0;
display: flex;
}

.paragraph{
display: flex;
width: 100%;
}

我正在使用弹性盒子。知道如何使红色段落适合跨度行高大小吗？谢谢。

【问题讨论】：

它正确显示jsfiddle.net/6fpzkjv4
可以设置段落高度

标签： html css height flexbox

【解决方案1】：

奇怪的是，字体大小为 6vh 的容器设置与行高不一致。

感谢您的帮助。

【讨论】：

【解决方案2】：

这是工作小提琴：http://jsfiddle.net/6fpzkjv4/1/

span
{
    display:block;
    margin:0px;
}

【讨论】：

【解决方案3】：

Span 是一个内联元素。它没有宽度或高度。

你可以把它变成一个块级元素，然后它会接受你的维度指令。

span 使用以下样式：

display: block;
height:100%;

查看工作 plunkr ：“http://plnkr.co/edit/MrCVzIbpETzYEs0N5rV6?p=preview”

【讨论】：

它可以工作，但是如果我有多行，它不会很好地渲染，因为它会增加行之间的空间。
"plnkr.co/edit/QA0OpS1YUDWZUqVcnU6Z?p=preview" 看看这个 plunkr，如果我有两个跨度而不是 1，那么它看起来也很好。
不幸的是我不想要块设计，我需要背景色只贴在文本上，而不是贴在块上......对不起！
背景色只针对span中的文本，不涉及其他元素，如果不能使用块元素则不能设置高度。

【解决方案4】：

我认为您必须针对您的浏览器引擎... 因为我复制了我在 IE 上尝试过的代码，所以效果很好。

您使用的是哪种浏览器？

如果您使用的是 chrome，您可以使用 -webkit- 或 mozilla -moz-

您可以通过此链接here---获得帮助

【讨论】：

它对你有用只是因为你的页面高度太小了

【解决方案5】：

尝试在红色容器上使用 min-height 并将其放低，例如：min-height: 5px;

【讨论】：

不幸的是我不能，因为字体大小/行高可以动态改变。