显示内联块添加了无法控制的垂直边距答案

【问题标题】：Display inline block adds uncontrollable vertical margins显示内联块添加了无法控制的垂直边距
【发布时间】：2013-11-21 01:01:37
【问题描述】：

似乎我已经在previous similar case 中遇到了我的问题，但现在即使在将父 div 的字体大小和行高设置为 0 并删除任何可能有害的空白之后，我也遇到了同样的问题。

在示例 (http://jsfiddle.net/vDsR4/2/) 中，我希望页眉的高度正好是 40 像素，但我得到了额外的 5 像素高度，并且看不到任何原因。（在最新的 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>

【问题讨论】：

尝试添加vertical-align: top;到图标 div jsfiddle.net/vDsR4/3
Huangism，你打败了我，但你的答案不是答案的形式。 ://
@isherwood 只是在工作停机期间提供帮助
在 Firefox 中，它的高度 + 边框底部 = 43px，请参阅@Jérémy 的回答。当您删除border-bottom时，高度是预期的40px。

标签： html css

【解决方案1】：

试试：

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

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

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

【讨论】：

字体大小不同所以不对齐，因为默认的垂直对齐是基线（我认为），所以对齐到顶部会解决这个问题
有道理，但我原以为较小的字体大小的基线会等于或高于较大字体的基线。
是的，这背后的原因似乎是与基线对齐，奇怪的是，较小的字体比较大的字体在基线下有更多的“空间”。无论如何 - vertical-align: top - 在我的真实用例中解决了我的问题。谢谢。

【解决方案2】：

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

如果它不能解决您的问题，请尝试在每个级别设置高度（因此为孩子添加一个高度），这可能会有所帮助；您还可以在标题上设置overflow: hidden; 来隐藏额外内容，但没有它应该可以解决。 ;)

【讨论】：

【解决方案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 */
}

【讨论】：