box-sizing:border-box; は子要素に継承されない

今更なのですが、ボックスサイジングの話（おさらい）

---

ボックスサイジングとは？

デフォルトでは、box-sizingの値はcontent-boxになっています。

content-boxだとどうなるか？

ボーダー(枠線)の太さが、コンテンツの幅や高さに含まれません。

例えば幅が100pxの領域に、幅10pxの枠線を引くと、全体の幅は枠線の幅とコンテンツで指定した幅を合算して120pxになります。

枠線の分、幅が広がってしまっていますね。

コンテンツを並べてデザインする時に、この幅の分を計算して引いてやらないと、ピッタリ揃えることができません。

※paddingも同じように幅に影響があります

幅を20px縮めて全体の幅を100pxに合わせたのに、paddingを10px追加したことで再び幅が20px広がってしまいました。

---

box-sizingの値をborder-boxにするとどうなるか？

⇒領域の幅の中に、borderとpaddingの幅が含まれるようになります。

つまり、幅を100pxに指定した領域に、10pxの枠線と10pxのpaddingを指定しても、全体の幅は100pxのまま。

レイアウトを考える時に、いちいち枠線の幅に合わせてコンテンツの幅を調整する必要がなくなります。
これは便利ですね！

全体の幅は変わらず、内側の領域を減らすようになります。（その結果、中の表示領域が狭くなってはみ出してしまっています。）

---

はっきり言って、border-box は便利ですね、全部 border-box で統一してほしいくらい。

しかし、デフォルトは「 content-box 」なんですね。

何故デフォルトがcontent-boxなのかというと、box-sizingがまだなかった古い規格との互換性を維持するためですね。

そして、なんで急におさらいしてるかというと、一点、勘違いしていたことがあったのに気がつきまして。

それは、「box-sizingの値は子要素に継承されない」ということ。

親要素にbox-sizingを指定すれば、その領域内の子要素にも自動的に box-sizing が適用されると勘違いしていたのです。しかし、そうなっていない事に気がついて・・・調べたみたら中の要素に設定が引き継がれないんですねぇ…orz

中の要素にもすべてに border-box を指定してやらないといけないんですね。

あるいは全称セレクタ「*」を使って指定してやればOKですね。

body *{ box-sizing: border-box; }

---

はて、このテーマに使われているのはどっち？と思い、CSSを調べてみましたが、パーツごとに必要に応じて指定されているようです。

記事の領域内は当然無指定＝ content-box ですね。

とりあえず、子テーマのCSSの記事本文部分だけ border-box にしておきました。

#main * { box-sizing: border-box; }