css - 避免垂直对齐 : middle extending height of containing block

Question

鉴于以下内容(也在 JSFiddle 上):

div {
    font-size: 28px;
    outline: 1px solid red;
    width: 40%;
    float: left;
    line-height: 36px;
}
div:first-child::before {
    content: "Hi!";
    display: inline-block;
    vertical-align: middle;
    outline: 1px solid blue;
    font-size: 8px;
}

<div>xHello, world!</div>
<div>xHello, world!</div>

第二个 div(即，没有垂直对齐的中间内容)是 36px 高(正如人们所期望的那样；其中的单行框的高度为 36px，根据 line-height) .

第一个 div 在这里是 39px 高(子像素渲染，这里会有一些细微的变化，所以 39px/40px 都是合理的预期)，作为内容 ::before 的行框由于其垂直对齐方式，超出了“正常”内容的 36 像素。我怎样才能让包含 block (即 div)仅扩展到 36px 高(假设我不担心内容 ::before 溢出它)？

将其从正常流程中移除的典型方法在这里不起作用，因为它不再垂直对齐。鉴于 block 级元素的高度取决于其中最底部的行框，这是否合理？

Answer 1

::before 元素继承了 36px 行高。据我了解，它不需要那个行高，因为您使用的是居中文本的垂直对齐方法。事实上，这个不必要的高行高是导致问题的原因。重置它:

div {
  font-size: 28px;
  outline: 1px solid red;
  width: 40%;
  float: left;
  line-height: 36px;
}
div:first-child::before {
  content: "Hi!";
  display: inline-block;
  vertical-align: middle;
  outline: 1px solid blue;
  font-size: 8px;
  /* the line height is inherited, reset it */
  line-height: normal;
}

<div>xHello, world!</div>
<div>xHello, world!</div>