# margin

> 要素の外側の余白を指定するプロパティです。上下左右を個別に指定できるほか、autoを使った中央配置も可能です。負の値を使うことで要素を重ねることもでき、レイアウト調整の基本となるプロパティです。

- カテゴリ: スペーシング・サイズ
- URL: https://www.css-dictionary.com/property/margin/

## 構文

```css
margin: <length> | <percentage> | auto
```

## Tailwindでは

- `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]`

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: 上下0、左右自動（中央寄せ）

```css
margin: 0 auto;
```

### 例2: 全方向に24pxの外側余白

```css
margin: 24px;
```

## TIPS

margin: 0 autoでブロック要素の中央寄せが可能。

## よくある間違い

マージンの相殺（margin collapse）を理解していないと予期しないレイアウトになる。

## AIがよく間違えるポイント

縦方向のマージン相殺（collapsing）をAIは考慮せず、「余白が思ったより小さい/大きい」コードを出しがちです。また要素間の余白管理は個別marginよりも親のgapに寄せるのがモダンな設計で、AIには方針を明示すると一貫したコードになります。

## AIへの依頼文例

- この縦の余白が意図通りにならない原因をマージン相殺の観点で調査して修正して
- セクション間の余白管理をmarginからgapベースの設計に整理して

## 関連プロパティ

- [padding](https://www.css-dictionary.com/property/padding.md)
- [margin-inline](https://www.css-dictionary.com/property/margin-inline.md)