如果和标签都有em字体大小，那么实际高度是多少？(If a and tag both have an em font

和标签都有em字体大小，那么实际高度是多少？(If a

and tag both have an em font-size what is the actual height?)

使用CSS在浏览器中进行设计我知道当你编写一个文本块时， <span>标签上设置的font-size是基于<p>标签的相对单位。

研究

从我的搜索中，我能够从“ 嵌套<span>内部的<p>标签中提供不同的字体大小 ”，引用CSS-Tricks ：

“em单位是一个基于父元素字体大小的计算值的相对单位。这意味着子元素总是依赖于它们的父元素来设置它们的字体大小。”

但搜索后我无法在我的问题中产生结果：

我发现的另一个类似的问题，但没有回答我正在寻找的东西：

问题

如果你有HTML：

Research

From my searches I was able to produce a similar recent question from "Nested <span> inside a <p> tag giving different font size" that references CSS-Tricks:

"The em unit is a relative unit based on the computed value of the font size of the parent element. This means that child elements are always dependent on their parent to set their font-size."

But I was unable to produce a result to my question after searching:

Another similar question I found but doesn't answer what I'm looking for:

The Question

If you have HTML:

With CSS:

What is the actual font-size height of the text This month is March. with the applied CSS font-size set on the <p> and <span>?

I ask because I'm curious to know the equation if I wanted the same height without having the <span> tag? Is there a formula to determine the final font-size when a <p> and <span> tag that both have a height applied?

最满意答案

因为em是百分比信息，所以您可以通过将各个字体大小相乘来计算最终的em 。

0.833em * 0.8em = 0.6664em

这将在浏览器中以准确的方式工作，或者取决于浏览器如何在内部处理字体大小。 如果浏览器在px中使用em依赖的元素的中间大小表示，那么如果存在舍入错误，则可能会得到稍微不同的结果。

.foo {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.833em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}
.bar {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.8em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}

.bar2 {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.6664em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
} 
  
<p class="foo"><span class="bar">This month is March.</span></p>
<span class="bar2">This month is March.</span> 
  
 
Because em is a percentage information, you can calculate the final em by multiplying the individual font sizes.
 
0.833em * 0.8em = 0.6664em
 
Wether this will work in an accurate way in the browser or not depends on how the browser handles the fonts sizes internally. If the browser uses an intermediate size representation in px for the elements where the em depends on, then you might get slightly different results if there are rounding errors.
 
 
 
  
  
.foo {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.833em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}
.bar {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.8em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}

.bar2 {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.6664em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
} 
  
<p class="foo"><span class="bar">This month is March.</span></p>
<span class="bar2">This month is March.</span>