为什么我的h1都很局促？

Question

在my website我有一个<H1>（第一个），其中有一个标题，但它都是狭窄的。我已经检查了CSS，无法理解为什么它们被挤在一起。你能帮我找到罪魁祸首吗？

Answer 1

因为这个：

style.css（第115行）

body{
  12px/1.5em sans-serif <===
  ...
}

Answer 2

你在身上设置了line-height，你会惊讶于线高度搞砸了吗？删除那种风格，你就全部修好了。

Answer 3

将行高设置为1（默认值）。 line-height: 1;

Answer 4

最有可能是这一行：

.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 { font-family: Arial, Helvetica, sans-serif; margin:0 0 0.5em; line-height:1.5em; }

在swatch / styles.css中。

该行高属性可能是个问题。

Answer 5

为标题指定line-height。通过查看字体，尝试line-height: 1.1em。即。

h1{ line-height: 1.1em; }

Answer 6

您需要在css中设置行高。例如

h1
{
   line-height: 30px;
}

希望这有帮助

Answer 7

在你的style.css第115行中，你的H1是你身体风格的font: 12px/1.5em sans-serif;。

Answer 8

包含h1元素的元素的宽度设置为50％。这迫使长行驶过几条线。删除该设置并缩短标题。

Answer 9

另一个相同的答案，但必要：

如果父元素设置了行高，则以某种方式取消设置h1..6的行高是从父元素继承的。在Firefox 24，Chrome 30和ie8中进行了测试。

所以这里是css重置区域的另一行，重置h1..6行高并防止继承行为：

h1,h2,h3,h4,h5,h6 {
line-height:normal; /*otherwise line-height is inherited*/
}