親につけたline-heightが子に継承されない理由が知りたい

Question

   <div class="circ">

      <p>1</p>

    </div>

.circ {
  background: linear-gradient(to right, #325a8b 50%, #03306e 50%);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: #fff;
  text-align: center;
  line-height: 50px
  
}

p {


}

本来ならp要素の１という文字が円の真ん中に来るはずだと思うのですがどうして親につけただけでは効かないのでしょうか。

Comments

[s8_chu]

`line-height` プロパティは CSS Level 1 に由来するプロパティであるため、 CSS3 というタグは適切ではないと思います。 CSS タグに付け替えていただけませんか？

Answer 1

こちらの環境 (Windows 7/10, Firefox/Chrome 最新版) では、 line-height プロパティは正常に継承されています。これは jsFiddle 上でも確認出来ました (動作確認用リンク)。以下のような原因が考えられますが、いずれにせよ質問文のコードに問題は見受けられないため、一度以下の項目に該当する問題が存在しないかを確認してみてください。また、上記 jsFiddle のページでも line-height プロパティが継承されている動作が確認出来るかどうかを確かめてみてください。

1. どこかで line-height プロパティを上書きしている。
2. キャッシュが残っている (キャッシュの消去を試してみてください)。
3. 変更したファイルとは異なるファイルを見ている。