パディングに関するプロパティを説明します。
★マージン(margin)・パディング(padding)・ボーダー(border)とは？
マージン(margin)とは、要素周りの余白部分で、パディング(padding)とは
要素（文字や画像）からボーダー(border)までの領域部分です。
ボーダー(border)は要素を囲む箱のようなものです。
マージン関連のプロパティ
ボーダー関連のプロパティ
★上パディングを指定する
書式 padding-top:高さ
上パディングの高さを指定します。
負の値を指定することはできません。
記述例
--- CSSの記述 ---
/* 上パディングの高さを指定 */
P.ptop{
padding-top:47px;
background-color:#87ceeb;
}
--- HTMLの記述 ---
<P class="ptop">上に47pxのパディングを指定</P>
ブラウザで表示
★下パディングを指定する
書式 padding-bottom:高さ
下パディングの高さを指定します。
負の値を指定することはできません。
記述例
--- CSSの記述 ---
/* 下パディングの高さを指定 */
P.pbot{
padding-bottom:48px;
background-color:#98fb98;
}
--- HTMLの記述 ---
<P class="pbot">下に48pxのパディング</P>
かきくけこ
ブラウザで表示
★左パディングを指定する
書式 padding-left:幅
左パディングの幅を指定します。
負の値を指定することはできません。
記述例
--- CSSの記述 ---
/* 左パディングを指定 */
P.plef{
padding-left:60px;
background-color:#ffb6c1;
}
--- HTMLの記述 ---
<P class="plef">←に60pxのパディングを指定。あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも</P>
ブラウザで表示
←に60pxのパディングを指定。あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも
★右パディングを指定する
書式 padding-right:幅
右パディングの幅を指定します。
負の値を指定することはできません。
記述例
/* 右パディングを指定 */
P.prig{
padding-right:50px;
background-color:#deb887;
}
--- HTMLの記述 ---
<P class="prig">右に50pxのパディングを指定あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも</P>
ブラウザで表示
右に50pxのパディングを指定あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも
★パディングを一括指定する
書式 padding:幅や高さ(半角スペースで区切って複数指定可能)
パディングを一括指定します。負の値を指定することはできません。
値１つの場合：上下左右のパディングが一括指定されます。
２つの場合：記述した順に上下・左右にパディングが指定されます。
３つの場合：記述した順に上・左右・下にパディングが指定されます。
４つの場合：記述した順に上・右・下・左にパディングが指定されます。
記述例
--- CSSの記述 ---
/* 上下左右に27pxのパディング */
P.pad1{
padding:27px;
background-color:#90ee90;
}
/* 上下25px 左右30pxのパディング */
P.pad2{
padding:25px 30px;
background-color:#90ee90;
}
/* 上15px 左右22px 下48pxのパディング */
P.pad3{
padding:15px 22px 48px;
background-color:#90ee90;
}
/* 上30px 左20px 下50px 右15pxのパディング */
P.pad4{
padding:30px 20px 50px 15px;
background-color:#90ee90;
}
/* 上下左右に15pxのパディングと上下左右25pxのマージン */
P.pad5{
padding: 15px;
margin: 25px;
background-color:#90ee90;
}
--- HTMLの記述 ---
<P class="pad1">上下左右に27pxのマージン。ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ</P>
<HR>
<P class="pad2">上下25px 左右に30pxのパディング。ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ</P>
<HR>
<P class="pad3">上15px 左右22px 下48pxのパディング。ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ</P>
<HR>
<P class="pad4">上30px 左20px 下50px 右15pxのパディング。ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ</P>
<HR>
<P class="pad5">15pxのパディングと25pxのマージン。ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ</P>
ブラウザで表示
上下左右に27pxのマージン。ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ
上下25px 左右に30pxのパディング。ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ
上15px 左右22px 下48pxのパディング。ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ
上30px 左20px 下50px 右15pxのパディング。ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ
15pxのパディングと25pxのマージン。ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ
