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,816
  • 57
  • 73
  • 92
Scott Walter
  • 9,196
  • 4
  • 15
  • 21

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,468
  • 1
  • 7
  • 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
  • 792
  • 1
  • 6
  • 21
  • 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