嵌套< span>在< p>内部给不同的字体大小的标签 [英] Nested <span> inside a <p> tag giving different font size

问题描述

直接在< p> 标记和嵌套的< / code> code>< span> 标签给出了不同的结果。

  body {
 font-size：14px; 
} 
 
 p {
 font-size：1.4em; 
} 
 
。放大{
 font-size：1.7em; 
} 
 
< p>普通段落文字< / p> 
 
< p class =enlarge>放大文字< / p> 
 
< p>< span class =enlarge>这段文字大于上述内容。< / span>< / p> 
  

我期待< p class =enlarge> 和< p>< span class =enlarge> 给予我相同的结果。

下面是一个工作示例： https://jsfiddle.net/huymo47b/

解决方案您可以使用 rem （root em）而不是 em

em 是相对于父元素的，而 rem 从根（html）值引用

css代码变为

  body {
 font-size：14px; 
} 
 
 p {
 font-size：1.4em; 
} 
 
。放大{
 font-size：1.7rem; 
} 
  

代码可以在这里测试： https://jsfiddle.net/zrzahoro/

$ b 更新：

rem 从root（它是html标记）获取引用。如果你想控制在CSS中被引用的字体的值，而不是让它使用浏览器的默认值，那么也应该给 html 标记一个固定的字体大小。

Applying an enlarged font-size using em directly to a <p> tag and to the nested <span> tag are giving different results.

body {
 font-size: 14px;
}

p {
 font-size: 1.4em;
}

.enlarge {
  font-size: 1.7em;
}

<p>Normal paragraph text</p>

<p class="enlarge">Enlarged text</p>

<p><span class="enlarge">This text comes out larger than the above.</span></p>

I was expecting both <p class="enlarge"> and <p><span class="enlarge"> to give me the same result.

Here is a working example: https://jsfiddle.net/huymo47b/

解决方案

You can use rem (root em) instead of em

em is relative to the parent element, while rem takes reference from the root (html) value

The css code becomes

body {
 font-size: 14px;
}

p {
 font-size: 1.4em;
}

.enlarge {
  font-size: 1.7rem;
}

The code can be tested here: https://jsfiddle.net/zrzahoro/

Update:

The rem takes reference from root, which it html tag. If you want to control the value of font being referenced in your css instead of letting it use the browser default value, give a fixed font-size to html tag too.

这篇关于嵌套&lt; span&gt;在&lt; p&gt;内部给不同的字体大小的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！