带有跨度大小问题的H1文本

Question

我只知道html和css的基础知识。  我试图让我的H1内部跨度显示小于h1尺寸

<h1>title<br><span>title 2</span><h1>

然后是css

h1 {
font-size: font-size: 4.4em;
}

span {
display: block;
font-size : 1.4em;
}

但它仍然与h1的尺寸相同，请帮忙！

Answer 1

'em'是font-size的相对单位，'px'是固定值。因此，当您为H1设置字体大小为4.4em时，它会将浏览器的默认字体大小乘以4.4，并以该大小显示文本。你的跨度在H1内。基本上，SPAN中文本的字体大小为（默认字体大小* 4.4）* 1.4

由于该值乘以1.4，您没有注意到差异，但正在应用它。尝试使用不同的SPAN字体大小值，如2em，你会发现差异。

是的，正如其他人指出的那样，请更正CSS语法。

Answer 2

尝试将错误的值输入css属性

h1 {
font-size:4.4em;
}

Answer 3

你的h1上有“font-size：font-size：”。删除一个：

h1 {
  font-size: 4.4em;
}

span {
  display: block;
  font-size : 1.4em;
}

Answer 4

由于span位于h1内，因此会继承font-size。

如果您未明确提供任何font-size，则span的{​​p} font-size将为4.4em。

您希望font-size span更小，意味着font-size应小于1em。 1em表示与父母一样的字体大小。

在你的例子中，1.4em意味着4.4em的1.4倍。 尝试：

span {
    display: block;
    font-size : 0.7em;
}

Fiddle here.

Answer 5

“em”是一个可扩展的单元，用于Web文档媒体。 em等于当前的字体大小，例如，如果文档的字体大小为12pt，则1em等于12pt。 Ems本质上是可扩展的，因此2em等于24pt，.5em等于6pt等。 均值在您的情况下，您为span 1.4em设置font-siz，它表示您的字体大小：

Actual Font Size of Inner Element (span) is :-  (font-size of the document) * (font-size of Parent Container h1 ) * (font-size of inner element span)

Read this document

Try to set PX value  - http://jsfiddle.net/c7LG5/