避免垂直對齊：中間延伸高度包含塊

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的線框延伸超過「normal 「內容，由於其垂直對齊。我怎樣才能得到包含塊（即div）只擴展到36px高（假設我不關心內容::before溢出它）？

將它從正常流程中取出的典型方法在此不起作用，因爲它不再是垂直對齊的。鑑於塊級元素的高度取決於其中最底部的線框，這是否合理？

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>