新登場! 44ページの電子書籍「CSSを44分で学ぶ」がリリースされました! 😃
#margin
margin-top
、margin-right
、margin-bottom
、margin-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番目の値は左用です
順番を覚えるには、上から始めて時計回りに進んでください。