CSS Line-height的段落太高了

Question

我遇到了包含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%;
}

我正在使用弹性盒子。 任何想法如何使红色段落适合跨度线高度大小？ 感谢。

Answer 1

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

您可以将其转换为块级元素，然后它将接受您的维度指令。

对span使用以下样式：

display: block;
height:100%;

参见work plunkr：＆＃34; http://plnkr.co/edit/MrCVzIbpETzYEs0N5rV6?p=preview＆＃34;

Answer 2

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

Answer 3

我认为您必须定位您的浏览器引擎... 因为我复制了我在IE上尝试过的代码，它运行正常。

您使用的是哪种浏览器？

如果你正在使用chrome，你可以使用-webkit-或mozilla -moz -

您可以获取此链接here---

的帮助

Answer 4

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

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

Answer 5

奇怪的是，设置字体大小为6vh的容器正在弄乱行高。

感谢您的帮助。