5

我有一个标题 ( <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; }

这是之前和之后：

doctype 声明前后

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

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

4

6 回答 6

4

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

有多种解决方法。设置元素display: block是small一种方式，因为它的默认行高将根据它自己的字体大小来确定。另一种方法是设置一个远小于字体大小的行高，例如

h1.banner { line-height: 0.5; }
于 2013-05-06T20:08:09.997 回答
3

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

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

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

我确定<br />标签没有做错任何事情，除非您使用我不建议的 CSS 更改了它的属性。

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

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

例如：

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

希望这可以帮助。

于 2013-05-06T18:15:29.047 回答
2

删除<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; }
于 2013-05-06T18:59:22.933 回答
0

另一种方法是将跨度设置为display: block;，然后调整标签line-height的。<h2>

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

于 2013-05-06T18:26:55.997 回答
0

最终，可以在此处找到作为最佳解决方案的答案（第三个示例）：

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

<h1>@cimmanon 发布了一个非常有用的解决方案，但为了安全起见，我将坚持史蒂夫福克纳所说的关于使用标签和<h2>标签作为子标题或标题标签内的内联元素的更语义和 SEO 友好的解决方案，无论样式如何。

这是解决方案：

HTML：

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

CSS：

  h1.banner {
  text-align: center;
  display: block;
  font-family: 'arvil';
  font-size: 6.5em;
  color: #94babd;
  font-weight: normal;
  margin: 1em 0 0 0;/*purely for display purposes, really*/ }

  header > p {font-family: Helvetica, sans-serif;
  font-size: 1.75em;
  color: #888;
  letter-spacing: 1px;
  font-weight: 100;
  text-align: center;
  margin:0;  }

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

http://cssdeck.com/labs/xysgkffs

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

于 2013-05-06T20:28:07.350 回答
-1

更新....

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

margin: 0 auto;

小提琴

于 2013-05-06T18:27:50.193 回答