html - 显示内联块增加了不可控制的垂直边距

看来我已经在previous similar case中遇到了问题，但是即使将parent div的font-size和line-height设置为0并删除了任何可能有害的空白，现在我也遇到了同样的问题。

在示例（http://jsfiddle.net/vDsR4/2/）中，我期望标题的高度恰好是40px，但是我的高度额外增加了5px，看不到任何原因。 （在最新的Chrome和FF中也可以类似地工作）。



已解决（部分解决）：如答案中所述，这种行为的最可能原因是垂直对齐=基线（默认值）。现在，我注意到“ [*]”图标显示在“我的标题”下方。要变通解决此问题（所有包含的元素都应该具有相同的高度），设置vertical-align = top可以完成此工作。我尚不清楚-为什么较小的字体在基线下比较大的字体具有更多的空间。

.pagehdr-slice {
    padding: 0 32px;
    height: 40px;
    line-height: 40px;
    background-color: #2980BA;
    border-bottom: 3px solid #3273a2;
}

.pagehdr-titlebox {
    color: #AAD0E8;
    width: 200px;
    border-right: 1px solid red;
    font-size: 0;
    line-height: 0;
}

.pagehdr-title-icons, .pagehdr-title {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    font-family: Arial;
    font-weight: bold;
}


.pagehdr-title-icons {
    font-size: 25px;
}

.pagehdr-title {
    font-size: 40px;
}

<header class="pagehdr-slice">
    <div class="pagehdr-titlebox"
       ><div class="pagehdr-title-icons">[*]</div
       ><div class="pagehdr-title">My Title</div
    ></div>
    <div class="pagehdr-splitter"></div>
</header>

最佳答案

尝试：

.pagehdr-title-icons {vertical-align: top;}

http://jsfiddle.net/isherwood/vDsR4/4/

我正在努力解释这种解决方案，但是我认为这与标题中两个元素之间的字体大小变化有关。