html - 标题标签的垂直间距

Question

如何控制 H 标签上方/下方的空间？例如，我希望两个 H 元素在 Logo 旁边垂直居中，并且它们之间的间距最小。

我试过使用 margin、padding 和 line-height 但似乎不太令人满意。例如:

CSS

img { 
    float: left; 
}
h1 {
    line-height: 0;
    padding-top: 32px;
}
h2 {
    margin-top: -20px;
}

HTML

<div id="logo">
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/200px-IBM_logo.svg.png" />
  <h1 id="a">Label A</h1>
  <h2 id="b">Label B</h2>
</div>

http://jsfiddle.net/49cAv/19/

有什么更好的方法吗？

Answer 1

vertical-align 和 float 不一致。

Vertical-align 可以在 td(或类似显示)内使用，或者在 baseline 上使用，或者在内联框之间使用.

如果将显示为内联框的元素内的标题换行到另一个内联框旁边，那么，您可以将它们vertical-align 彼此:

DEMO

.valgn {
    vertical-align:middle;
    display:inline-block;
}
#logo h1, #logo h2 {
    margin:0;
}

对于这个标记:

<div id="logo">
    <img class="valgn" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/200px-IBM_logo.svg.png" />
    <div class="valgn">
         <h1 id="a">Label A</h1>
         <h2 id="b">Label B</h2>
    </div>
</div>

注意:为了验证结构，图像也可以包装到 div.valign 中。