html - 如何在分为两行的整个标题下划线

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)都是 block 级元素，因此任何边框都适用于整个 block ，而不是里面的文字。

span 是一个内联 元素，并且仅与内容一样宽(具有某些限制)。所以底部边框仅适用于跨度内容即使换行也是如此。

Mozilla.org (Understanding the inline box model)

Inline boxes are laid out horizontally in a box called a "line box":

If there isn’t enough horizontal space to fit all elements into a single line (or the line is forcibly broken), another line box is created under the first one. A single inline element may then be split across lines

When an inline box is split across more than one line, it’s still logically a single box. This means that any horizontal padding, border, or margin is only applied to the start of the first line occupied by the box, and the end of the last line.

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>