html - 如何在 <p> 元素中的基线上方 "allocate"有足够的垂直空间以支持 <sup> 元素

Question

我正在尝试在屏幕上创建一系列始终放置的“ block ”，但是当其中一个具有 <sup>&reg;</sup> 时我遇到了麻烦在里面，这使得它占据了更多的垂直空间:

每个 block 在代码中看起来像这样(参见示例 #2 的可运行代码片段):

<div class="myblock">
  <div class="bin">
    <span class="glue"></span>
    <p class="bingo">Text goes here</p>
    <span class="glue"></span>
  </div>
</div>

• 虚线矩形是 p.bingo包含所需文本的元素。
• 每个div.bin element 是一个水平容器，使用 flex在 p.bingo 周围添加相等的空间元素。
• 每个div.myblock element是一个整体容器，增加了垂直padding，约束了整体宽度

在每个p.bingo元素，我想在文本基线和元素顶部之间添加足够的空间，以便垂直空间保持一致。我该怎么做？

我尝试添加 min-height ，它修复了 block 高度的差异，但是基线位置不一致。 (参见示例 #2)

示例 #1。

div.container {
  position: relative;
}
div.myline {
  display: inline-block;
}
div.myblock {
  width: 120px;
  padding: 10px;
  background: #aaff88;
  font-family: Arial, sans-serif;
}
div.bin {
  display: flex;
}
span.glue {
  flex: 1;
  max-height: 0;
}
p.bingo {
  margin: 0;
  border: 1px dashed green;
}
div.show-baseline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 10px;
  min-height: 2.8ex;
  border-bottom: 1px dashed green;
}

<div class="container">
<div class="myline">
  <div class="myblock"><div class="bin">
    <span class="glue"></span>
  <p class="bingo">
    Spiffy hair!
  </p>
    <span class="glue"></span>
  </div></div>
</div>
<div class="myline">
  <div class="myblock"><div class="bin">
    <span class="glue"></span>
  <p class="bingo">
    Spiffy<sup>&reg;</sup> hair!
  </p>
    <span class="glue"></span>
    </div></div>
</div>
<div class="myline">
  <div class="myblock"><div class="bin">
    <span class="glue"></span>
    <p class="bingo">
      Vacuum grease
    </p>
    <span class="glue"></span>
    </div></div>
</div>
  <div class="show-baseline"></div>
</div>

示例 #2:

div.container {
  position: relative;
}
div.myline {
  display: inline-block;
}
div.myblock {
  width: 120px;
  padding: 10px;
  background: #aaff88;
  font-family: Arial, sans-serif;
}
div.bin {
  display: flex;
}
span.glue {
  flex: 1;
  max-height: 0;
}
p.bingo {
  margin: 0;
  border: 1px dashed green;
  min-height: 3.2ex;
}
div.show-baseline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 10px;
  min-height: 2.8ex;
  border-bottom: 1px dashed green;
}

<div class="container">
<div class="myline">
  <div class="myblock"><div class="bin">
    <span class="glue"></span>
  <p class="bingo">
    Spiffy hair!
  </p>
    <span class="glue"></span>
  </div></div>
</div>
<div class="myline">
  <div class="myblock"><div class="bin">
    <span class="glue"></span>
  <p class="bingo">
    Spiffy<sup>&reg;</sup> hair!
  </p>
    <span class="glue"></span>
    </div></div>
</div>
<div class="myline">
  <div class="myblock"><div class="bin">
    <span class="glue"></span>
    <p class="bingo">
      Vacuum grease
    </p>
    <span class="glue"></span>
    </div></div>
</div>
  <div class="show-baseline"></div>
</div>

Answer 1

有 a hack确保<sup>和 <sub>不要对行高产生负面影响，可以通过组合 vertical-align: baseline 来正确对齐它们和 position: relative ，然后设置对应的top偏移量:

sup, sub {
  vertical-align: baseline;
  position: relative;
}

sup {
  top: -0.4em;
}

sub {
  top: 0.4em;
}

这可以从以下方面看出:

div.container {
  position: relative;
}

div.myline {
  display: inline-block;
}

div.myblock {
  width: 120px;
  padding: 10px;
  background: #aaff88;
  font-family: Arial, sans-serif;
}

div.bin {
  display: flex;
}

span.glue {
  flex: 1;
  max-height: 0;
}

p.bingo {
  margin: 0;
  border: 1px dashed green;
}

div.show-baseline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 10px;
  min-height: 2.8ex;
  border-bottom: 1px dashed green;
}

sup,
sub {
  vertical-align: baseline;
  position: relative;
}

sup {
  top: -0.4em;
}

sub {
  top: 0.4em;
}

<div class="container">
  <div class="myline">
    <div class="myblock">
      <div class="bin">
        <span class="glue"></span>
        <p class="bingo">
          Spiffy hair!
        </p>
        <span class="glue"></span>
      </div>
    </div>
  </div>
  <div class="myline">
    <div class="myblock">
      <div class="bin">
        <span class="glue"></span>
        <p class="bingo">
          Spiffy<sup>&reg;</sup> hair!
        </p>
        <span class="glue"></span>
      </div>
    </div>
  </div>
  <div class="myline">
    <div class="myblock">
      <div class="bin">
        <span class="glue"></span>
        <p class="bingo">
          Vacuum grease
        </p>
        <span class="glue"></span>
      </div>
    </div>
  </div>
  <div class="show-baseline"></div>
</div>