paddingの評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)
目次
1.paddingとは?
paddingプロパティはボックスの内側の余白の幅をまとめて指定できます。
値の指定方法は以下の通りです。
{ padding: -top -right -bottom -left; }
値の指定方法
値は半角スペースで区切って4つまで指定できます。
それぞれ上辺、右辺、下辺、左辺に適用されます。
省略した場合、以下のような指定になります。
- 値が1つの場合:すべての辺に同じ値が適用される
- 値が2つの場合:1つ目が上下辺、2つ目が左右辺に適用される
- 値が3つの場合:1つ目が上辺、2つ目が左右辺、3つ目が下辺に適用される
2.paddingの使い方
それではpaddingの使い方をみていきましょう。
以下のように指定することで上下辺に10px、左右辺に20pxが適用されます。
.box-example01 {
padding: 10px 20px;
}
他にも値を設定できるのでいろいろと試してみることをお勧めします!