cssプロパティpaddingについての説明

こんにちは tanaka です。

cssプロパティ
padding の説明です。

padding は
ボックスモデルcontentの外側へ
スペースを作るために使います。

画像blog-css-list01-01

(指定できる値)
 ・px
 ・em
 ・%
  など

特に大きなトラブルを
起こすことのない
プロパティです。

しかし、
paddingは、初期値に0ではない
数字が入っているので

*{
padding: 0;
}
を入れておくと良いでしょう。

そして、
それぞれ
辺の指定もできて便利です。

padding-top
padding-right
padding-bottom
padding-left

それでは、詳しく説明していきます。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

paddingの説明

paddingとは

padding は
ボックスモデルcontentの外側へ
スペースを作るために
使います。

画像blog-css-list01-01

paddingには、
backgroundの色や画像も入ります。

そして、
paddingは、初期値に0ではない
数字が入っているので

*{
padding: 0;
}
を入れておくと良いでしょう。

値の指定方法

指定方法は、4つあります。

1:全周
2:上下左右
3:左右
4:

1:全周

padding: 30px;
全周に30pxのスペースを作ります。

2:上下 左右

padding: 10px 30px;
 上下 = 10px
 左右 = 30px
のスペースを作ります。

3:上 左右 下

padding: 10px 20px 30px;
 上  = 10px
 左右 = 20px
 下  = 30px
のスペースを作ります。

4:上 右 下 左

padding: 10px 20px 30px 40px;
 上 = 10px
 右 = 20px
 下 = 30px
 左 = 40px
のスペースを作ります。

指定の順番は
padding: 1 2 3 4;

 1左上 → 2右上
        ↓
 4左下 ← 3右下
左上スタートの時計回りです。

それぞれ辺のプロパティもある

それぞれ個別で
辺の指定もできます。

padding-top
padding-right
padding-bottom
padding-left

まとめ

padding

padding は
ボックスモデルcontentの外側へ
スペースを作るために使う。

(指定できる値)
 ・px
 ・em
 ・%
  など

指定方法は4つ

指定方法は、4つ

padding: 30px;
padding: 10px 30px;
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px;

(全周)
(上下) (左右)
(上)  (左右) (下)
(上)  (右)  (下) (左)

個別の指定も

それぞれ個別で
辺の指定もできる。

padding-top
padding-right
padding-bottom
padding-left

初期値は0ではない

初期値に0ではない
数字が入っているので

*{
padding: 0;
}
を入れておくと良い。

詳しくは、
下の記事をご覧ください。

以上、
padding
の話でした。

ありがとうございました。

タイトルとURLをコピーしました