CSS 間隔設計ルール

この skill は、間隔の責務を子要素ではなくコンテナ側へ戻し、規則的な間隔は gap、構造的な空白は空のグリッドセル、margin は例外に限定するためのものです。 grid-template の書き方や空セルの表記ルールは ../kf-g-css-flex-grid/SKILL.md を優先し、この skill では間隔責務の分離に絞って扱います。

この skill を使う場面

• gap と margin のどちらを使うか決めるとき
• siblings 間の余白を margin で積んでよいか見直すとき
• レイアウト内の空白を gap、空セル、margin のどれで表現するか決めるとき
• grid や flex の子要素間隔を、コンテナ責務へ戻せないか検討するとき
• AI が生成した CSS に、場当たり的な margin-block-start や margin-inline-start が混ざっていないか確認するとき

最初に決めること

1. その間隔は同一コンテナ内の規則的な間隔か
2. その空白はレイアウト上の位置関係そのものを表すか
3. その余白はコンテナ内の責務か、コンテナ外との関係か
4. 既存構造を変えられるか