HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎31. 外余白のプロパティ(margin)

      2017/07/11   hatano

marginプロパティ(マージン)

marginはボックス(要素)の外余白の設定です。上下左右4方向で設定できます。単位は主にpx, %を使用します。
emでも設定できますが通常はあまり使用しません。

marginのショートハンド

ショートハンドという省略記法で指定すると下記のようになります。各値は半角スペースで区切ります。

上、右、下、左で指定(右回りで指定します)

上下、左右を指定

上、左右、下で指定

値が0の場合は単位を省略できます。

marginの注意点

注意点として親要素と子要素のwidthプロパティ, heightプロパティが同じ値の場合、子要素でmarginを指定しても親要素を押し広げることはできません。

特殊な値「auto」

左右のmarginには「auto」という特殊な値が使用できます。autoは左右どちらかのmarginに値が設定されていると、値を指定した反対方向にmargin:auto指定するとを余白を自動調整します。上下の値にautoを指定した場合は無視されます。この値を利用してブロックレベルの要素を常に中心に整列することができます。

右側に値を設定し左側をmagin: auto;にすると右側に整列できます。

ネガティブマージン

値に - (マイナス)をつけると1つ前の要素に重ねることができます。

<p>ネガティブマージン

まとめ

  • marginはボックスの外余白の設定
  • ショートハンドの指定は上から右回りで指定する
  • 左右にはautoという自動調整の値がある
  • ネガティブマージンを使うと要素を重ねることができる

広告

 - HTML・CSS