Question

鉴于以下内容（也在JSFiddle上）：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

第二个div（即没有垂直对齐的中间内容）是36px高（正如人们所期望的那样;其中的单个行框的高度为36px，每line-height）。

这里的第一个div是39px高（子像素渲染，这里预计会有一些轻微的变化，所以39px / 40px都是合理的预期），因为内容::before的线框超出了36px的范围＆＃34;正常＆＃34;内容，由于其垂直对齐。如何让包含块（即div）仅扩展到36px高（假设我不关心溢出它的内容::before）？

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

Answer 1

::before元素继承36px行高。据我所知，它不需要行高，因为你使用了居中文本的垂直对齐方法。事实上，这种不必要的高线高度正在引发这个问题。重置它：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

避免垂直对齐：包含块的中间延伸高度

1 个答案: