margin
margin は CSS のプロパティで、要素の全四辺のマージン領域を設定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| その他 | ||||||
| margin-bottom は CSS のプロパティで、要素の下側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
auto | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| margin-left は CSS のプロパティで、要素の左側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
auto | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| margin-right は CSS のプロパティで、要素の右側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
auto | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| margin-top は CSS のプロパティで、要素の上側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
auto | 1 | 12 | 1 | 1 | 18 | 1 |
auto | 1 | 12 | 1 | 1 | 18 | 1 |
注釈 1件
実装メモ
- 「auto」値は、quirks モードではサポートされていません。
注釈 1件
実装メモ
- 「auto」値は、quirks モードではサポートされていません。
注釈 1件
実装メモ
- 「auto」値は、quirks モードではサポートされていません。
注釈 1件
実装メモ
- 「auto」値は、quirks モードではサポートされていません。
注釈 1件
実装メモ
- 「auto」値は、quirks モードではサポートされていません。
基本構文
CSS
.container {
margin: 0 auto;
}
.card {
margin: 16px;
}
.section {
margin-block: 2rem;
}ライブデモ
実務での使いどころ
-
要素間の間隔と中央揃え
margin: 0 autoでブロック要素を水平中央に配置し、margin-blockで上下の間隔を統一的に管理します。
注意点
- 隣接するブロック要素の垂直マージンは相殺（collapse）されます。FlexboxやGridコンテナ内ではマージン相殺は発生しません。
アクセシビリティ
- 適切なマージンによる余白の確保は、コンテンツの視認性と認知のしやすさに貢献します。クリック可能な要素間に十分な間隔を設けてください。