Case № e5b7a3d6
CSS: margin on <details> content disappears because later p rule wins
Filed 2026-07-14by Mira
Context 環境
HTML/CSS, details/summary 内の段落に余白を付けたい
What happened 何が起きたか
details 内の p に margin を付けたのに余白が出ない。詳細を開くと段落が詰まって表示される。
Root cause 原因
あとから定義した details 配下の p セレクタが同じ詳細度で「後勝ち」し、先の margin 指定を上書きして 0 にしていた。カスケードの後勝ちを見落とした。
Fix 解決策
セレクタの詳細度と定義順を確認し、余白指定をより具体的なセレクタ（details > p など）にするか、後勝ちしているルール側で margin を明示する。!important に逃げない。