为什么我的嵌套段落不遵循字体大小样式？

Question

如果我有这个

.outer {
   font-size: 2em;
 }

<div class="outer">
    Some Outer Div Text
    <div class="inner">
       Some Inner Div Text
    </div>
</div>

两个文本都是 32px (16px *2)

然而 HTML:

 <p class="outer">
    Some Outer Div Text
    <p class="inner">
       Some Inner Div Text
    </p>
  </p>

外层文字32px，内层文字16px

为什么段落标签不像 div 标签那样尊重父级的字体大小？我认为它们的工作原理相同，因为它们都是块元素？

如果我不清楚，这里有一个 JSFiddle：https://jsfiddle.net/scottfwalter/2Lrd6tzm/

Answer 1

那是因为浏览器有自己预定义的基本排版样式。因此，例如 chrome 为 <p> 设置 font-size: 16px，但对 <div> 只字不提。这就是为什么我们使用 normilize.css 或 reset.css 来避免这种不匹配的原因。尝试设置 * {font-size: 16px;} - 这应该可以解决问题

Answer 2

简单的答案是你不能嵌套 p 标签，如果你打开控制台并检查你会看到 2 个 p 标签是兄弟而不是 parent/child，因此没有继承。
有关详细信息，请参阅此答案 Nesting <p> won't work while nesting <div> will?

为什么我的嵌套段落不遵循字体大小样式？

Why doesn't my nested paragraph respect font-size styles?

html

css

font-size