outsideborderの外側
marginは背景色で塗られず、要素のクリック領域にも含まれません。
margin
要素の境界線より外側に余白をつくるプロパティ。周囲との距離を4方向から調整します。
遊んでみよう
外側の余白
BOX
CSS
.element margin: 24px 32px;
値のパターン
marginの構成要素
clockwise上から時計回り
4値では上・右・下・左の順に、それぞれの外側余白を指定します。
auto / negativeautoと負の値
autoで残り幅を分配でき、負の値では要素同士を近づけられます。
早見表
基本の順番は上 → 右 → 下 → 左。横方向の中央寄せには0 autoを使います。
01
24px4方向すべて上下左右02
24px 40px上下・左右縦 / 横03
12px 24px 36px上・左右・下3方向04
0 auto横方向の中央寄せ幅が必要よくある使い方
01
カード同士を離す
隣り合う要素の間に余白をつくり、まとまりを読みやすくします。
margin-bottom: 24px;02
要素を中央へ置く
幅が決まったブロックの左右をautoにすると中央へ配置できます。
margin: 0 auto;03
一部を重ねる
負のmarginを使うと、見出しや画像を少しだけ重ねられます。
margin-top: -16px;ポイント
上下のmarginは折りたたまれることがある。
通常のブロック要素が縦に並ぶと、上下のmarginが足し算ではなく大きいほうへまとめられる場合があります。余白が想定と違うときはmarginの相殺を確認します。
関連するCSSも見てみよう。
margin と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。