Question

我正在尝试使用字体大小和行高小于默认值的段落，甚至可能小于1。试图了解它是如何工作的。

在摘录中你会看到两段：第一段是正常的行高，第二段是行高0.8。我们可以看到第二段确实更短，但它的顶层跨度（红色边框）高于其包含的段落。更有趣的是，每行文字都保持其高度。为了证明这一点，我只包含了另一个跨度（绿色边框）中的第一个单词。我们可以看到内跨距保持完全相同的高度。外跨度确实变得更短，但仅仅是因为浏览器将顶部和底部线条呈现在彼此之上。

另一个有趣的事实是该段落环绕了文本的基线，因此在带有溢出：隐藏样式的段落的情况下，下划线将被切断。

有人可以解释这种行为吗？有没有办法让段落环绕整个文本，包括上升/下降？

感谢。

$(function() {
  var $p1 = $('p:first'),
      $p2 = $('p:last'),
      $span1 = $p1.children().first(),
      $span1Inner = $span1.children().first(),
      $span2 = $p2.children().first(),
      $span2Inner = $span2.children().first();
   
  $p1.next().html("outer span height is: " 
               + $span1.outerHeight()
               + "<br>inner span height is: " 
               + $span1Inner.outerHeight()
               +"<br>p height is: " + $p1.outerHeight());
  $p2.next().html("outer span height is: " 
               + $span2.outerHeight()
               + "<br>inner span height is: " 
               + $span2Inner.outerHeight()
               +"<br>p height is: " + $p2.outerHeight());

});

p {
  width: 270px;
  font-size: 50px;
  border: black 1px solid;
}
p:last-of-type {
  line-height: 0.8;
}
p > span {
  border: red 1px solid
}
span > span {
  border: green 1px solid
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <p><span><span>HELLO</span> MR. JOE</span>
  </p>
  <div></div>
  <p><span><span>HELLO</span> MR. JOE joe</span>
  </p>
  <div></div>
</body>

</html>

Answer 1

范围的默认显示属性为内嵌。内联元素将接受边距，填充等，这也可能是由线高变化引起的。尽管如此，该元素仍然可以像您期望的那样内嵌。边距和填充只会水平推动兄弟元素或父元素，不垂直。通过将您的子跨度显示为：inline-block，您将能够强制浏览器尊重内部的高度，以便自动计算＆lt;的高度。 p>元件。

https://css-tricks.com/almanac/properties/d/display/

使用行高＆lt;行高度包围其内容的段落1

1 个答案: