このサイトついて

このサイトではホームページを
作りたいという方のために、
HTML・CSSの解説
便利なソフト・本などの紹介
レンタルサーバの紹介
などを行っています。

パディングの設定をしたい

対応ブラウザ

パディングは領域の内側の余白を設定します。
パディングの設定は必ず使うようになるので確実に覚えましょう。

パディングに関するプロパティ

パディングは上下左右を個別に設定することができます。

padding-top:・・・・上のパディングを設定する
padding-bottom:・・・下のパディングを設定する
padding-left:・・・左のパディングを設定する
padding-right:・・・右のパディングを設定する

また、複数の値を一気に記述することで上下左右の設定をすることができます。

padding:10px;/*上下左右*/
padding:10px 20px;/*上下、左右*/
padding:10px 20px 30px;/*上、左右、下*/
padding:10px 20px 30px 40px;/*上、右、下、左*/

■補足■
パディングの値には数値（pxやpt）・割合（％）・autoがあり、
パディングはマイナスの数値を指定することができません。
また、領域の外を設定するプロパティとしてマージン(margin)があります。

サンプルページ

<p>の設定はpadding:10px 20px 30px 40px;にしました。

戻る