要素の外側の余白を指定するプロパティです。上下左右を個別に指定できるほか、autoを使った中央配置も可能です。負の値を使うことで要素を重ねることもでき、レイアウト調整の基本となるプロパティです。
margin: <length> | <percentage> | auto| m-4 | margin: 16px |
| mx-auto | margin-inline: auto |
| mt-2 | margin-top: 8px |
| -mt-2 | margin-top: -8px |
一般形: m-{n}（n×4px。負の値は -m-{n}）
任意値: m-[18px]
.element {
margin: 16px;
}margin: 0 auto;上下0、左右自動（中央寄せ）
margin: 24px;全方向に24pxの外側余白
margin: 0 autoでブロック要素の中央寄せが可能。
マージンの相殺（margin collapse）を理解していないと予期しないレイアウトになる。
縦方向のマージン相殺（collapsing）をAIは考慮せず、「余白が思ったより小さい/大きい」コードを出しがちです。また要素間の余白管理は個別marginよりも親のgapに寄せるのがモダンな設計で、AIには方針を明示すると一貫したコードになります。
この縦の余白が意図通りにならない原因をマージン相殺の観点で調査して修正して
セクション間の余白管理をmarginからgapベースの設計に整理して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。