縦スタック

タイポ ／ パターン集トップ

margin 相殺を避ける基本レイアウト。gap だけで間隔を取る

プレビュー#

調整する#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<div class="stack">
  <h2>お知らせ</h2>
  <p>8月の休業日は12日と26日です。</p>
  <p>ご予約はお早めにお願いします。</p>
  <a href="#contact">問い合わせ</a>
</div>

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-4));
}
.stack > * {
  margin: 0;
}
.stack h2 {
  font-size: var(--text-lg);
}
.stack p {
  color: var(--color-text-muted);
}
/* 文字の行は30px。押せる高さを44pxにする。組の gap が16pxあるので、
   上の段落とは離れたままになる */
.stack a {
  align-self: start;
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  color: var(--color-accent-text);
}

確認する#

• 子要素の margin を 0 にリセット
• 組内 gap と組間 margin を混在させない
• 375pxでも gap が効いている
• リンクの高さが44pxある

関連#

• 余白
• レイアウトの実装
• 出発点のCSS