Почему нет тег абзаца с единицей em не относится к родителю

Question

Если у меня есть это

.outer {
   font-size: 2em;
 }

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

Оба текста 32px (16px * 2)

Однако с этим

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

Внешний текст 32px, но внутренний текст 16px.

Почему тег абзаца не соответствует размеру родительского шрифта, как тег div. Я думал, что они будут работать одинаково, поскольку они оба являются блочными элементами?

Вот скрипка на случай, если мне непонятно https://jsfiddle.net/scottfwalter/2Lrd6tzm/

Answer 1

Простой ответ: вы не можете вкладывать p-теги; если вы откроете консоль и осмотрите, то увидите, что 2-теговые теги являются родственными, а не родительскими / дочерними, поэтому наследования нет.
См. Этот ответ для более подробной информации Вложение

не будет работать, в то время как вложение

будет?

Answer 2

Это потому, что браузеры имеют свои собственные предопределенные стили для базовой типографики. Так, например, хром устанавливает font-size: 16px для <p>, но ничего не говорит о <div>. Вот почему мы используем normilize.css или reset.css, чтобы избежать такого несоответствия. Попробуйте установить * {font-size: 16px;} - это должно сработать