显示内联块会增加无法控制的垂直边距

Question

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

在示例（http://jsfiddle.net/vDsR4/2/）中，我希望标题的高度正好是40px，但我得到的额外5px高度并且看不出任何原因。 （在最新的Chrome＆amp; FF中类似地工作）。

解决（部分）：如答案中所述，此类行为的最可能原因是vertical-alignment = baseline（默认值）。现在我注意到'[*]'图标显示在'我的标题'下面。要解决问题（只要所有包含元素都应该具有相同的高度），设置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>

Answer 1

尝试：

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

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

我很难解释这个解决方案，但我认为它与标题内两个元素之间的字体大小变化有关。

Answer 2

在最新的Chrome中，您的标题的高度为43px，该高度来自您设置的边框（边框添加到大小，并且不包含在其中）。

如果它无法解决您的问题，请尝试在每个级别设置高度（这样可以为孩子们增加一个高度），这可能会有所帮助;你也可以在你的标题上设置一个隐藏额外内容的overflow: hidden;，但是没有它就应该解决。 ;）

Answer 3

或添加一个浮动：左;在.pagehdr-title-icons，.pagehdr-title类：

.pagehdr-title-icons, .pagehdr-title {
    display: inline-block;
    height: 40px; 
    line-height: 40px; 
    font-family: Arial;
    font-weight: bold;
    float:left; /*add this to align both */
}