html - block 元素背景与子内联元素背景相对

Question

为什么p里面的匿名内联文本的后代元素突出背景或 p 的(内容区域)元素，而 span元素的背景(或内容区域)包含文本的下行部分(和潜在的上行部分)？这是否与字体的 em-box 计算、未完全包含内联子项的 block 元素或行高 1 等于字体大小有关？ https://jsfiddle.net/norkuy/462wzvq1/

p {
  font-size: 40px;
  margin: 0;
  line-height: 1;
  background: tomato;
  color: black;
  margin-top: 20px;
}

p span {
  background: DarkSlateGray;
  color: white;
}

<p>A sentence containing <span>ggg's</span> and <span>jjj's</span></p>

Answer 1

p 元素是 block 元素，它们的高度是根据 1 的 line-height 计算的>，它是根据 40px 的 font-size 计算得出的。因此 p 的计算height 为 40px，这不足以覆盖下部。

span 元素是 inline 元素，其高度会根据其内容自动设置。他们甚至会忽略分配给他们的任何高度属性。因此高度和 background-color 覆盖了所需的空间。

作为另一个示例，我复制了相同的代码片段，但应用了一个类将 span 元素转换为 inline-block 元素，这将遵循我们的高度已定义。

p {
  font-size: 40px;
  margin: 0;
  line-height: 1;
  background: tomato;
  color: black;
  margin-top: 20px;
}

p span {
  background: DarkSlateGray;
  color: white;
  
  /*
  /  No matter what we do
  /  we can't change the height
  */
  font-size: 40px;
  line-height: 1;
  height: 40px !important;
}

.turnedIntoBlock {
  display: inline-block;
}

<p>A sentence containing <span>ggg's</span> and <span>jjj's</span></p>

<p>A sentence containing <span class="turnedIntoBlock">ggg's</span> and <span class="turnedIntoBlock">jjj's</span></p>