カード上下の余白は同じ1単位に揃える

日付の下にカード、カードの下に本文。左右の余白はきちんと揃っているのに、縦の間隔だけがちぐはぐに見える。こういうとき、原因は個別のクラスの数値ではなく「上下の間隔をどう切り分けて見るか」にあることが多いです。

今日の結論

• 「日付→カード」と「カード→本文」の縦の間隔が違うと、レイアウト全体がズレて見える
• 左右のmarginの話にせず、上下の間隔だけを切り分けて確認する
• 同じ単位(例: どちらも mt-4)に揃えると、視覚的な落ち着きが出やすい

なぜ上下の間隔だけがズレて見えるのか

原因はたいてい、間隔が1箇所ではなく複数箇所の合算になっていることです。カードの下の余白は、見た目には1つの隙間に見えても、実際はヘッダー側の pb-* と本文側の mt-* が足し算された結果であるケースがある。片方だけを見て「余白はmt-4のはず」と判断すると、実際の見た目とのズレに気づけません。

筆者が実装時に確認した範囲でも、日付→カードは単純な mt-4 1つだったのに対し、カード→本文はヘッダーの pb-* と本文コンポーネントの mt-* が重なっていました。数値上は近い値でも、合算されている分だけ実際の間隔は広く見えていたわけです。

揃え方の手順

設定を変える前に、まず現状の内訳を確認します。

1. 日付→カードの余白クラス(例: カードの mt-4)を確認する
2. カード→本文の余白が、ヘッダーの pb-* と本文の mt-* の合算になっていないか見る
3. 片方に寄せて同じ値に揃え、先頭H2に余分な margin-top が乗っていないかも確認する

3番目を飛ばすと、間隔を揃えたつもりでもH2側の余白が上乗せされ、結局ズレが残ります。

確認チェックリスト

• 日付→カードの余白クラスを確認した
• カード→本文の余白が pb-* と mt-* の合算になっていないか確認した
• 片方に寄せて同じ値に揃えた
• 先頭H2の margin-top が余分に乗っていないか確認した

まとめ・次に読む

カードUIの縦の間隔がズレて見えるときは、個別の数値よりも「何と何が合算されているか」を先に切り分けるのが近道です。左右のmarginを疑う前に、上下の間隔だけを分解して見る習慣をつけておくと、同じような詰まりに気づきやすくなります。

見出し下線の色揃えは/blog/h2-underline-brand-accent、記事リードのカード化は/blog/article-description-cardも参照してください。

---

本記事の内容は執筆時点(2026-07-27)の情報に基づきます。実装のクラス名や数値は使用しているCSSフレームワークの構成によって異なる場合があり、仕様は変更される可能性があります。重要な判断は実装コードとデザインシステムのドキュメントで確認してください。