新着!私の44ページの電子書籍「CSS in 44 minutes」が発売されました! 😃
#padding
padding-top
、padding-right
、padding-bottom
、padding-left
の短縮プロパティです。
default
padding: 0;
すべてのpaddingを削除します。
padding: 30px;
1つの値を使用する場合、paddingは4辺すべてに設定されます。
padding: 30px 60px;
2つの値を使用する場合
- 最初の値は上下、
- 2番目の値は左右です。
順番を覚えるには、定義していない値について考えましょう。
2つの値(上/右)を入力すると、下と左の設定は省略されます。下は上の垂直方向の対応物であるため、上の値を使用します。同様に、左は右の水平方向の対応物であるため、右の値を使用します。
padding: 30px 60px 45px;
3つの値を使用する場合
- 最初の値は上、
- 2番目の値は左右です。
- 3番目の値は下です。
順番を覚えるには、定義していない値について考えましょう。
3つの値(上/右/下)を入力すると、左の設定は省略されます。右の対応物として、右の値を使用します。
padding: 30px 60px 45px 85px;
4つの値を使用する場合
- 最初の値は上、
- 2番目の値は右、
- 3番目の値は下です。
- 4番目の値は左です。
順番を覚えるには、上から始めて時計回りに考えましょう。