子要素は親要素のcontentに入る(html,css)

こんにちは tanaka です。

今回は、
ボックスモデルと
親要素、子要素の話です。

ボックスモデルを学んでいると、
子要素が、親要素のどこに入るか
分からなくなることは
ありませんか?

特に、
border-boxなど出てくると
よく分からなくなります。

しかし、
どのような場合においても、
子要素は、親要素のcontentに入ります。

動画像blog-the-child-enters-the-parent01

それでは
詳しくみて行きましょう。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

説明

子要素は、親要素のcontentに入る

ボックスモデルを学んでいると、
子要素が、親要素のどこに入るか
分からなくなることは
ありませんか?

特に、
border-boxなど出てくると
よく分からなくなります。

しかし、
どのような場合においても、
子要素は、親要素のcontentに入ります。

動画像blog-the-child-enters-the-parent01

そもそも、
contentは文字や画像を入れるために
使います。

子要素も同様で、
contentに入ります。

どこのcontent?

親要素のcontentです。

なぜ、分かりにくいのか?

なぜ、
よく分からなくなる事があるのか?

それは、
おそらく親要素を
box-sizing: border-boxに
した時でしょう。

box-sizing: content-boxは、
contentの大きさを
直接決める事ができます。

画像blog-the-child-enters-the-parent02

しかし、

box-sizing: border-boxは、
contentの大きさを
直接決める事ができません。

画像blog-the-child-enters-the-parent03

それが
分からなく原因です。

これだけは覚えて

しかし、
これだけは覚えてください。

どのような場合においても、
子要素は、親要素のcontentに入る。

とにかく
子要素、親要素で
分からなくなった時は、

親要素のcontentにだけ
注目してください。

まとめ

親要素のcontentに注目

子要素が、
親要素のどこに入るか
分からなくなった時は、

親要素のcontentにだけ注目。

以上、
子要素は
親要素のcontentに入る(html,css)
の話でした。

ありがとうございました。

タイトルとURLをコピーしました