(cssboxの)領域は【margin外側余白の領域 {border境界線 [ padding内側余白 (コンテンツ)]}】
の4段階の領域があるんだけど、cssboxのbackground-color背景色はborder境界線の領域(下記サイトの水色枠境界の縁)までを塗りつぶしてるらしい。
ボックスは 4 つの部品(または領域)から構成され、それぞれの縁についてコンテンツの縁 (content edge)、パディングの縁 (padding edge)、境界の縁 (border edge)、マージンの縁 (margin edge) が定義されています。
...
ボックスに背景(background-color または background-image)が設定されている場合、背景は境界の縁の外枠まで拡張されます
--- ※ここからはwikiwikiのcssbox触った感じで書く。触った感じなんで違うかも。詳しい人指摘して。----
- 上端側の親要素の枠線との余白は、子のborderかpaddingを書いてれば、borderかpaddingの領域が上端の親要素の枠線までくっつく感じで設定されてるっぽい。
- 上端側のborderかpaddingが0px指定か未設定ならば、コンテンツの文字(
今期の特殊効果:ブレイク作戦
とか)のギリギリ外側までしかborderまでの領域が設定されない=>文字と、親の枠線との間にborderかpaddingが無い=背景色灰色で塗られない余白ができる
=>つまり、上端側にborderかpadding領域があれば親要素の縁にくっつくので子にはとりあえずpaddingを小さいサイズで書いてる
って感じにみえる。
(ごめん誤記編集した)
通報 ...
わかりやすい説明で助かりました!ありがとうございます!