1

If I have this

.outer {
   font-size: 2em;
 }
<div class="outer">
    Some Outer Div Text
    <div class="inner">
       Some Inner Div Text
    </div>
</div>

Both texts are 32px (16px *2)

However with this HTML:

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

The outer text is 32px, while the inner text is 16px.

How come the paragraph tag doesn't respect the parent's font-size like the div tag? I thought they would both work the same since they are both block elements?

Here's a JSFiddle in case I'm not clear: https://jsfiddle.net/scottfwalter/2Lrd6tzm/

TylerH
  • 20,799
  • 66
  • 75
  • 101
Scott Walter
  • 9,426
  • 4
  • 18
  • 23

2 Answers2

2

Simple answer is you can't nest p tags, if you open the console and inspect you will see the 2 p tags are siblings instead of parent/child, therefore there is no inheritance.
See this answer for more details Nesting <p> won't work while nesting <div> will?

Chris Li
  • 2,628
  • 1
  • 8
  • 23
0

That's because browsers have their's own predefined styles for basic typography. So for example chrome sets font-size: 16px for <p> but says nothing about <div>. That's why we use normilize.css or reset.css to avoid such missmatching. Try setting * {font-size: 16px;} - this should do the trick

Elijah Ellanski
  • 892
  • 1
  • 8
  • 23
  • That does make sense. I added * {font-size: 16px;} however it doesn't seem to help. If outer paragraph has a font-size of 2em and the inner paragraph has a font-size of 1em shouldn't they both be 32px. The div tag works with both the inner and outer as 32px as I expected. Just curious why the paragraph tag doesn't seem to use the parent paragraph tag as expected. FYI--I updated the fiddle. You wouldn't normally nest paragraph tags. Had someone ask me this the other day and I can't come up with a good answer. – Scott Walter Sep 11 '18 at 13:46