html - 段落的 CSS 行高太高

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%;
}

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

Answer 1

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

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

对 span 使用以下样式:

display: block;
height:100%;

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