余白（margin / padding）
marginpaddingmargin-blockmargin-inline
marginは要素の外側の余白、paddingは要素の内側の余白です。ボックスモデルの基本であり、ページのレイアウトを制御する最も使用頻度の高いプロパティです。
デモ：margin（外側）vs padding（内側）
margin（黄：外側の余白）
padding（青：内側の余白）
コンテンツ
← 要素の外側に margin、要素の内側（境界線から内容まで）に padding が適用されます
デモ：ショートハンド（上 右 下 左）
padding: 16px（全方向16px）
コンテンツ
padding: 8px 24px（上下8px / 左右24px）
コンテンツ
padding: 4px 12px 20px 36px（上4 / 右12 / 下20 / 左36）
コンテンツ
デモ：margin: auto でセンタリング
margin: 0 auto
width を指定 + margin: 0 auto で水平センタリング
デモ：負のmargin
通常の要素
margin-top: -16px（重なる）
負のmarginは要素を引き寄せ、重なりを生み出せます。ただし乱用は避けること。
マージンの相殺（Margin Collapsing）
⚠️ ブロック要素を縦に並べると、隣接するmarginは相殺されます
- 上の要素の
margin-bottom: 20pxと - 下の要素の
margin-top: 30pxがあっても - 実際の間隔は 50pxにならず30px（大きい方が採用される）
相殺あり（ブロック要素）
mb: 20px
mt: 30px → 実際は30px
相殺なし（flex/grid内）
mb: 20px
mt: 30px → 実際は50px
比較：margin vs padding
| 観点 | margin（外側） | padding（内側） |
|---|---|---|
| 背景色 | ❌ 背景色は適用されない | ✅ 背景色が適用される |
| 負の値 | ✅ 使用可能 | ❌ 使用不可（0以上のみ） |
| 相殺 | ⚠️ 縦方向は相殺される | ✅ 相殺なし |
| auto値 | ✅ margin: 0 auto でセンタリング | ❌ autoは使用不可 |
| クリック範囲 | ❌ クリック範囲に含まれない | ✅ クリック範囲に含まれる |
NEW論理プロパティ（Logical Properties）—— RTL/LTR対応
従来の margin-top/right/bottom/left は物理方向を指定します。論理プロパティは書字方向（横書き・縦書き、左書き・右書き）に対して相対的に指定します。多言語対応サイトで特に有効です。
| 論理プロパティ | 横書きLTR時 | 説明 |
|---|---|---|
| margin-block-start | margin-top | ブロック軸の開始側 |
| margin-block-end | margin-bottom | ブロック軸の終了側 |
| margin-inline-start | margin-left | インライン軸の開始側 |
| margin-inline-end | margin-right | インライン軸の終了側 |
| margin-block | margin-top + bottom | ブロック軸（上下）のショートハンド |
| margin-inline | margin-left + right | インライン軸（左右）のショートハンド |
/* 従来の書き方 */
.box { margin-top: 16px; margin-bottom: 16px; }
/* 論理プロパティ（推奨） */
.box { margin-block: 16px; }
/* RTLでも正しく動作 */
.text { margin-inline-start: 12px; } /* LTR: 左マージン / RTL: 右マージン */コード例
/* ショートハンドの書き方 */
.box {
margin: 16px; /* 全方向 */
margin: 16px 24px; /* 上下16px, 左右24px */
margin: 8px 12px 16px 20px; /* 上 右 下 左（時計回り） */
padding: 16px;
}
/* 個別指定 */
.box {
margin-top: 16px;
margin-right: 24px;
margin-bottom: 16px;
margin-left: 24px;
}
/* センタリング */
.centered {
width: 600px;
max-width: 100%;
margin: 0 auto;
}
/* 論理プロパティ */
.rtl-safe {
margin-block: 16px; /* 上下 */
margin-inline: 24px; /* 左右（書字方向依存） */
padding-block-start: 8px;
padding-inline-end: 12px;
}🤖 AIプロンプトテンプレート
CSSのmargin・paddingプロパティを使った余白デモをReact + Tailwind CSSで作成してください。 要件: - margin（外側）とpadding（内側）の違いをボックスモデルで視覚的に表現するデモ - ショートハンド記法（1値・2値・4値）を実際に確認できるインタラクティブUI - margin: autoによる水平センタリングの実装例 - マージンの相殺（Margin Collapsing）をブロック要素とFlexコンテナで比較するデモ - 負のmarginの実用例（重なりの演出） - 論理プロパティ（margin-block / margin-inline）によるRTL対応の実装例
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。