logo标签列表

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

htmlcssline-breaks
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; }

以下是改前和改后的效果：

改前和改后的文档类型声明

我在 StackOverflow 上搜索了一下，但不确定该怎么做。我了解到 <br /> 标签只是换行符，但它会继承行距，而且 line-spacing: (value) 不起作用，边距和填充也不行。

我需要的是一个简单的、适用于各种浏览器的解决方案。我在截图中使用的是 Chrome 浏览器。虽然不需要支持 IE6-7，但支持 IE8 会很好。

1
为什么不在第二行使用<h2>或其他标签？ - Mi-Creativity
2
@JEES - HTML5规范明确表示不应该这样做。 - Alohci
我还想指出，有一些“解决方案”涉及更改<br/>标签的CSS，但正如@Robbert所提到的那样，这并不被建议。当我尝试这样做时，结果千差万别： h1 > br {content: " "; display: block; margin: -.5em;}。 - Justin W
1
@JEES - hgroup在HTML5中已经过时。 - Alohci
1
@Alohci，你有链接吗？[html5semantic] 更新于4月3日（http://caniuse.com/#feat=html5semantic） - Mi-Creativity
显示剩余7条评论
6个回答
4
问题是由标题元素的默认行高引起的。默认值取决于浏览器和字体，但通常约为字体大小的1.1到1.3倍。无论如何，当设置非常大的字体大小时，这会创建一个问题，因为行高值还设置了第二行的高度。按照CSS规范，对于块级元素，line-height设置行框的最小高度。
有各种方法可以解决这个问题。在元素上设置display:block是一种方法，因为然后它的默认行高将根据自己的字体大小确定。另一种方法是设置远小于字体大小的行高，例如：
h1.banner { line-height: 0.5; }
3
您需要控制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;

希望这能帮到您。
谢谢你的建议。我正在使用Normalize，但我猜没有任何声明默认行高的东西。有什么更彻底的重置建议吗？我想我可以自己添加一些。 - Justin W
CSS重置讨论已经存在多年。我无法在这里为您提供一个简单的解决方案，而不会引发有关CSS重置的大讨论。您可以查看cssreset.com以获取当前流行的CSS重置方法。随着您对CSS的使用越来越多，您很可能会根据自己的需求和风格使用自己的CSS重置。 - Robbert
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; }
非常好。这个有效，使用<header>标签也是有效的，带有标题和段落标签（包含标语）。 - Justin W
0

最终找到了最佳解决方案的答案在此处(第三个例子)：

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

@cimmanon发布了一个非常有用的解决方案，但为了安全起见，我将坚持Steve Faulkner关于这是一种更语义化和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

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

0

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

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

是的，但是也没有必要使用<span>。Justin可以使用块级元素，比如建议中的<div>或者<h2>。虽然我更喜欢使用<div>，因为<h2>表示子章节，而它并不是。 - Robbert
-1

更新....

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

margin: 0 auto;

{{链接1：FIDDLE}}

如果您扩大那个小提琴或任何屏幕的视图，标语不会对齐。它会固定在相对于视口的绝对位置上。 - Justin W
没有说这是好的方式，如果是我，我不会这样做。 - Mi-Creativity
这是一种方法，没错。但是...这里有一个相关的问题：http://stackoverflow.com/questions/9379739/p-tag-in-h1-for-seo。Steve Faulkner建议使用<header>标签（第三个例子）：http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#sub-head。这可能是我的解决方案。 - Justin W
@JustinW，为你感到高兴 :) ，虽然我认为@cimmanon的答案更好，我的意思是去掉<br>。 - Mi-Creativity
其实我已经知道即使在xhtml中它也是无效的，只是我忘了，但我很高兴我学到了<hgroup>现在已经被删除了，感谢@Alohci。 - Mi-Creativity
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接