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

Question

我有一个标题（<h1>），下面有一个标语。 （我使用<small>代码并将font-size设置为某个百分比，以便在我更改较小屏幕标题的font-size时完美排列。我使用{{1单位，如果重要的话。）

首先，em标签位于主标题下方，但我意识到我忘记了HTML5 DOCTYPE声明。所以，在我发现这个遗漏并纠正之后，间距都是错误的。

这是我的代码：

HTML：

<small>

CSS：

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

这里是之前和之后：

我搜索了StackOverflow，但我不确定如何继续。我已经读过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; } 标记只是换行符，但它继承了行间距，<br />不起作用，也没有边距或填充。

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

Answer 1

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

有很多方法可以解决这个问题。在display: block元素上设置small是一种方式，因为它的默认行高将根据自己的字体大小确定。另一种方法是设置一个比字体大小小得多的行高，例如

h1.banner { line-height: 0.5; }

Answer 2

您需要控制line-height css属性（请参阅W3 Schools）以确保所有浏览器为每一行设置相同的高度。

实际上建议对包含文本的所有元素执行此操作，这就是为什么大多数人使用CSS重置进行生成，这会为所有元素设置默认的行高。

在这种情况下，<span>和<h1>可能会有不同的行高。

我确定<br />标签没有任何错误，除非你用CSS改变了它的属性，我不建议。

如果你为同一个元素设置其他字体属性，还有一个速记版本：

font: <font weight> <font size>/<line height> <font face>;

例如：

font: bold 12px/18px sans-serif;

希望这有帮助。

Answer 3

删除<br />并将<small>元素的显示设置为阻止。

http://cssdeck.com/labs/uoqfo4xw

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

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;
display: block; }

Answer 4

另一种方法是将范围设置为display: block;，然后调整line-height代码的<h2>。

我会这样做，而不是使用<br />标记。

Answer 5

最终可以找到最佳解决方案的答案（第3个例子）：

http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#sub-head

@cimmanon发布了一个非常有用的解决方案，但为了安全起见，我会坚持使用Steve Faulkner所说的关于使用<h1>标签和{{1}这是一个更加语义和搜索引擎优化的解决方案。标记的标记，或标题标记内的内联元素，无论样式如何。

以下是解决方案：

HTML：

<h2>

CSS：

  <header>
    <h1 class="banner">Justin Wilson</h1>
    <p>WEB + GRAPHIC DESIGNER</p>
  </header>

现场演示（如果没有免费的Arvil字体，来自Lost Fonts，可能看起来不太好。）

http://cssdeck.com/labs/xysgkffs

感谢迄今为止的所有答案。

Answer 6

我同意@JEES - 这应该是一个h1和一个单独的h2，而不是small里面h1的{​​{1}}换行。语义标记总是更容易使用。

Answer 7

<强>已更新....

在HTML和CSS中将<small>更改为<p>，并在h1.banner > p

中添加一行

margin: 0 auto;

FIDDLE