ゼンレスゾーンゼロWiki掲示板

編集掲示板 / 53

155 コメント
views
0 フォロー
53
名無しのプロキシ 2024/08/02 (金) 20:24:38 be9a0@36b0b

今後の参考にお聞きしたいんですが式輿防衛戦のページの激変ノードの項目で使用されているcssboxにおいて、border-radius設定のかかっている親要素に対して子要素にpaddingを設定すると上面がくっつくようになるのはなぜなんでしょうか?

通報 ...
  • 54
    名無しのプロキシ 2024/08/03 (土) 00:13:57 修正 9e8be@cee9e >> 53

    (cssboxの)領域は【margin外側余白の領域 {border境界線 [ padding内側余白 (コンテンツ)]}】の4段階の領域があるんだけど、cssboxのbackground-color背景色はborder境界線の領域(下記サイトの水色枠境界の縁)までを塗りつぶしてるらしい。

    mozillaページ>CSS 基本ボックスモデル入門

    ボックスは 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を小さいサイズで書いてる
    って感じにみえる。

    (ごめん誤記編集した)

    57

    わかりやすい説明で助かりました!ありがとうございます!