新登場! 44ページの電子書籍「CSSを44分で学ぶ」がリリースされました! 😃

今すぐ入手 →

#margin

margin-topmargin-rightmargin-bottommargin-leftのショートハンドプロパティです。

デフォルト margin: 0;

すべてのマージンを削除します。

margin: 30px;

値を1つ使用する場合、マージンは4辺すべてに設定されます。

margin: 30px 60px;

値を2つ使用する場合

  • 1番目の値は上下用です
  • 2番目の値は左右用です

順番を覚えるには、定義していない値について考えてみてください。

2つの値(上/右)を入力すると、下と左の設定は*省略*されます。下は上の垂直方向の対応物なので、上の値を使用します。左は右の水平方向の対応物なので、右の値を使用します。

margin: 30px 60px 45px;

値を3つ使用する場合

  • 1番目の値は用です
  • 2番目の値は左右用です
  • 3番目の値は用です

順番を覚えるには、定義していない値について考えてみてください。

3つの値(上/右/下)を入力すると、左の設定は省略されます。右の対応物として、右の値を使用します。

margin: 30px 60px 45px 85px;

値を4つ使用する場合

  • 1番目の値は用です
  • 2番目の値は用です
  • 3番目の値は用です
  • 4番目の値は用です

順番を覚えるには、上から始めて時計回りに進んでください。