如何强调整个航向分为两行

Question

我想强调我的整个标题（H1），它被分成两行是这样的：

而且我已经成功地做到了，但不明白它背后的逻辑，即当我申请这个CSS，它没有工作：

CSS：

.main h1 { 
    font-size: 65px; 
    text-transform: capitalize; 
    font-weight: bold; 
    border-bottom: 5px solid #1A77FF; 
} 

然而，当我添加span标签，它的工作我

CSS：

.main h1 span { 
    font-size: 65px; 
    text-transform: capitalize; 
    font-weight: bold; 
    border-bottom: 5px solid #1A77FF; 
} 

任何人都可以请这给我解释一下？提前致谢。

Answer 1

当然。

任何标题标签（像一个h1）是块级元件所以任何边界适用于块作为一个整体而不是内的文本。

跨度是一个内嵌元素，并且只与内容一样宽（有一定的约束）。因此，即使线路中断时，底部边框仅适用于跨度内容。

Mozilla.org (Understanding the inline box model)

内联框在一个盒子水平排列称为“行框”：

如果没有足够的水平空间，以适应所有元素到一个单一的线（或线被强制断开），另一个线框在第一个下面创建。 然后可以跨行分割单个内联元素

当内联框分割成多行时，它仍然是逻辑上的单个框。这意味着任何水平填充，边框或边距仅适用于该框所占的第一行的开始，以及最后一行的结尾。

H1.block { 
 
    border-bottom: 3px solid red; 
 
} 
 
H1 SPAN { 
 
    border-bottom: 3px solid blue; 
 
}

<h1 class="block">BLOCK FORMAT</h1> 
 

 
<h1><span>INLINE <br/> FORMAT</span></h1>

Answer 2

<div>是块级元素而<span>是内嵌元素。
当您使用<div>时，它会按如下方式将文本包装在一个完整的块中。所以，边界属性应用于整个块。

而当您使用<span>时，它会逐行包装内容。所以，当添加边界属性时，它显示在每行下面。