Webサイト制作時によく使用するpaddingプロパティ。今回は余白を調整する際に使用するpaddingの使い方に関して紹介させて頂きます。

1. paddingとは？marginとの違いは？

marginと同様に、余白を調整する際に使用するプロパティになります。

ただ、marginとは意味合いが異なります。

margin：各要素"間"の余白を調整する際に使用する。

padding：各要素"内"の余白を調整する際に使用する。

もう少し具体的な例を言うと、

(例)Webサイトを作っていてヘッダーと本文の間に余白を設けたい。

→marginプロパティにて調整

(例)Webサイトを作っていてヘッダー内に余白を設けたい。

左詰めではなく、少し左側に余白を設けたい。

→paddingプロパティにて調整ということになります。

なので、margin(もしくはpadding)が効かないという方は、

自分がやりたいのがどちらなのか？ということを明確にする必要があります。

また、paddingは要素内に

追加で余白を設けるので、マイナスを指定することは出来ません。

1.1 直接サイズを指定して余白を設定

paddingプロパティは要素内の余白を調整する際に使用します。

例えば、余白を無くしたい場合は以下のように記入します。

サンプルコード

padding 0px;

paddingは全部で要素を4個まで指定することが出来て、

特定の辺だけ余白を調整したい場合には、複数要素を書いて調整します。

また、要素の数に応じて余白を調整する順番が変わります。

・要素1個の場合

(例)padding 0px;

この場合は全ての辺に対して、同じ余白が設定されます。

・要素2個の場合

(例)padding 0px 0px;

この場合は上下、左右という順番で余白が設定されます。

・要素3個の場合

(例)padding 0px 0px 0px;

この場合は上、左右、下という順番で余白が設定されます。

・要素4個の場合

(例)padding 0px 0px 0px 0px;

この場合は上、右、左、下という順番で余白が設定されます。

また、paddingでは上下左右の余白を一度に設定することが出来ますが、

特定の辺だけ余白を設定したい場合は、下記のプロパティでも設定することが出来ます。

padding-top：ブロックの上辺に対して余白を設定

padding-bottom：ブロックの下辺に対して余白を設定

padding-left：ブロックの左辺に対して余白を設定

padding-right：ブロックの右辺に対して余白を設定

1.2 相対サイズを指定して余白を設定

marginには、直接サイズを指定することも出来ますが、

「%」「auto」を指定することも出来ます。

%：ブロックに対する相対的な余白を設定

auto：ブラウザーが適切な余白を設定

autoに関しては、適度に余白を設定したいときや中央揃えしたいときに使います。

1.3 まとめ

marginプロパティと同様に余白を設定する際に使用するプロパティで、

慣れてしまえば難しくないと思います。

ただ、初めて使う際にはイメージ通りに行かないことが多いです。

marginプロパティと同様に、上手く使いこなして余白を調整しましょう！

marginプロパティに関する記事はこちら

➡【CSS】Webサイトにて余白を調整する(margin)

オススメサイト

➡ブログを書きながらいいね返しが出来る！アメーバドライブ

　メールアドレスを登録するだけですぐに使えます！

　一度登録すれば、ずっと無料で使えるのでおススメです！

➡FXの基礎知識が得られるFXの教科書

　メールアドレスを登録するだけで、FXに役立つ情報を手に入れられます！

　実際にFXを経験した方の知識なので説得力があります！

➡奥手な人のための恋愛レポートマニュアル

　メールアドレスを登録するだけで、恋愛に役立つ情報を手に入れられます！

　「片思いの人と距離を縮めるにはどうすればいいか？」

　そんな悩みに応えてくれる一冊となっています！

➡【HTML】HTMLの使い方が分かる！MDN

➡ドットインストール - 3分動画でマスターできるプログラミング学習サービス

【CSS】marginが効かない？paddingの使い方