ブラウザ標準の文字サイズとマージン

ブラウザによって、

段落タグや見出しタグには、

予め標準の文字サイズと上下マージンが設定されている。

EX)

　CSSファイルにおけるブラウザ標準値

       body {

           font-size : 16px ;

       }

      p { 

          font-size: 1em ;

          margin: 1em 0 ;

       }

      h1 {

          font-size: 2em ;

          margin: 0.67em 0 ;

      }

※ここで出てくる「 em 」 という単位は、

　基準となるfont-size を１としてその倍率で表される相対単位。

◉文字サイズ

p と h1 の親要素である body 要素には、16px の文字サイズがあるので、

　p の文字サイズ「 1em 」は、16 × 1＝16px 

　h1 の文字サイズ「 2em 」は、16 × 2＝32px となる。

◉マージン

マージンの「 em 」はそのまま文字サイズに対する比率でみる。

　p( 16px ) の上下マージンが「 1em 」なので、16px

    h1( 32px ) の上下マージンが「 0.67em 」なので、21px (32 × 0.67 = 21.44) となる。

※ただし、この際に上下マージンの相殺が行われるので、

　p( 16 px ) ＜ h1 ( 21px ) で 21px  が採用される。 

   重なり合うマージンの最大値が優先！！