CSS 行高没有一直向上或向下

Question

我有一个困扰我多年的问题。

带有 line-height: 1 的文本会很紧凑，并且会到达周围元素的顶部和底部。

具有另一个行高的文本将更具可读性，但同时，它不会再到达周围元素的顶部和底部。

这是问题的代码示例和骇人听闻的解决方案。更改行高或字体大小会破坏它。

这是一个可靠的解决方案吗？

.wrap {
  display: flex;
}

.first {
  background: red;
  width: 1rem;
}

.second,
.second2{
  line-height: 2;
}

.second2 {
  margin-top: -9px;
  margin-bottom: -7px;
}

<strong>Problem:</strong> The letter "A" does not align with the red top.<br><br>

<div class="wrap">
  <div class="first"></div>
  <div class="second">A text that<br>spans on multiple rows</div>
</div>

<br><br>

<strong>Hackish fix:</strong> The letter "A" does align with the red top.<br><br>

<div class="wrap">
  <div class="first"></div>
  <div class="second2">A text that<br>spans on multiple rows</div>
</div>

行高取到极致，只是为了展示效果

Answer 1

如您所见，如果您提供一个包含文本的元素：

font-size 个 1em
line-height 个 2em

文本将呈现在 line-height 的垂直中间。

文字仍然是 1em 高，但现在它的上下 0.5em 共 space 个。

为了（看似，但实际上）抵消这种垂直中间对齐，一种方法是应用

transform: translateY(-0.5em)

到包含文本的元素。

工作示例：

body {
  display: flex;
}

.wrap-1,
.wrap-2,
.wrap-3 {
  display: flex;
  margin-right: 12px;
}

.first {
  background: red;
  width: 1rem;
}

.wrap-1 .second {
  font-size: 1em;
  line-height: 1em;
  background-color: rgb(255, 255, 0);
}

.wrap-2 .second {
  font-size: 1em;
  line-height: 2em;
  background-color: rgb(255, 255, 0);
}

.wrap-3 .second {
  font-size: 1em;
  line-height: 2em;
  background-color: rgb(255, 255, 0);
}

.wrap-3 .second p {
  background-color: rgba(0, 0, 0, 0.2);
  transform: translateY(-0.5em);
}

p {
  margin: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

<div class="wrap-1">
  <div class="first"></div>
  <div class="second"><p>A text that<br>spans on multiple rows</p></div>
</div>

<div class="wrap-2">
  <div class="first"></div>
  <div class="second"><p>A text that<br>spans on multiple rows</p></div>
</div>

<div class="wrap-3">
  <div class="first"></div>
  <div class="second"><p>A text that<br>spans on multiple rows</p></div>
</div>

CSS 行高没有一直向上或向下

CSS line height does not go all the way up or down

css

line-height