Question

我有一个带有跨度的简单段落。我在段落上声明的em中有一个字体大小 - 以及跨度。问题是，跨度的字体大小与我给出的em不准确。我已经注意到这一点，删除了父母段落元素的字体大小，但是使span的字体大小保持不变 - 这由于某种原因会缩小范围。

示例：https://jsfiddle.net/1wfhjpvr/

现在，我知道这里发生了一些关于继承的事情 - 但是我怎样才能轻松地使用span字体大小声明，以及我在段落元素上的标准字体大小声明，并获得我期望的结果？

Answer 1

这是因为您正在使用一个值相对于容器元素的单位。如果你想看到＆＃39;相同的值，你应该使用relative-ems。在您的示例中：

<p style="font-size: 1.4em;">
    Test
    <span style="font-size: 1.4rem;">
        Test
    </span>
</p>

<p>
    Test
    <span style="font-size: 1.4em;">
        Test
    </span>
</p>

https://jsfiddle.net/q7bo2kLt/

Answer 2

Em是您拥有em的父容器的相对大小，其中您具有相对大小的相对大小。你需要跨度的em吗？

Answer 3

您使用em的单位是相对于父元素的，如果您想要使用相同的值1em，那么在您的示例中：

<span style="font-size: 1em;">

有一些名为rem（root em）的新单位，它们与身体设置有关。您可以使用它们，在这种情况下它们更容易维护。

REM browser support

Nice article about font-sizing

所以你的例子可能是：

<p style="font-size: 1.4rem;">
    Test
    <span style="font-size: 1.4rem;">
        Test
    </span>
</p>

<p>
    Test
    <span style="font-size: 1.4rem;">
        Test
    </span>
</p>

它适用于您，请参阅更新的JSFiddle

为什么我的段落中的span具有比指定的更大的渲染字体大小？

3 个答案: