html - 控制标题标签内 标签的行高？

Question

我有一个标题 ( <h1> )，它下面有一条标语。 (我使用了 <small> 标签并将 font-size 设置为一定的百分比，因此当我更改标题的 font-size 以适应较小的屏幕时它会完美对齐。如果重要的话，我使用的是 em 单位。)

首先，<small>标签很好地位于主标题下方，但我意识到我忘记了 HTML5 DOCTYPE 声明。所以，当我发现这个疏漏并改正后，间距全错了。

这是我的代码:

HTML:

<h1 class="banner">Justin Wilson<br /><small>WEB + GRAPHIC DESIGNER</small></h1>

CSS:

h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd; }

h1.banner > small {
font-family: Helvetica, Arial, sans-serif;
font-size: 27%;
color: #888;
letter-spacing: 1px;
font-weight: 100; }

这是之前和之后:

我已经通过 StackOverflow 进行了搜索，但不确定如何继续。我读过 <br />标记只是换行符，但它继承了行间距，并且 line-spacing: (value)不起作用，边距或填充也不起作用。

我需要的是一个简单的跨浏览器解决方案。我使用 Chrome 进行截图。不需要支持 IE6-7，但支持 IE8 会更好。

Answer 1

问题是由标题元素的默认行高引起的。默认值取决于浏览器和字体，但它往往是字体大小的 1.1 到 1.3 倍左右。在任何情况下，设置非常大的字体大小都会产生问题，因为行高值也会设置第二行的高度。根据 CSS 规范，对于 block 元素，line-height设置行框的最小高度。

有多种解决方法。在small 元素上设置display: block 是一种方法，此后其默认行高将根据其自身的字体大小确定。另一种方法是设置比字体大小小得多的行高，例如

h1.banner { line-height: 0.5; }