パディング関連プロパティ

パディングに関するプロパティを説明します。

★マージン(margin)・パディング(padding)・ボーダー(border)とは?

マージン(margin)とは、要素周りの余白部分で、パディング(padding)とは
要素(文字や画像)からボーダー(border)までの領域部分です。

ボーダー(border)は要素を囲む箱のようなものです。

マージン・パディング・ボーダー

マージン関連のプロパティ
ボーダー関連のプロパティ


★上パディングを指定する

Internet Explorer 4 Internet Explorer 5 Internet Explorer 5mac Internet Explorer 5.5 Internet Explorer 6 Netscape 4 Netscape 6 Netscape 7 Opera 6 Opera 7 Firefox 1 Firefox 2

書式 padding-top:高さ

上パディングの高さを指定します。
負の値を指定することはできません。

記述例

--- CSSの記述 ---
/* 上パディングの高さを指定 */
P.ptop{
padding-top:47px;
background-color:#87ceeb;
}

--- HTMLの記述 ---
<P class="ptop">上に47pxのパディングを指定</P>

ブラウザで表示

上に47pxのパディングを指定


★下パディングを指定する

Internet Explorer 4 Internet Explorer 5 Internet Explorer 5mac Internet Explorer 5.5 Internet Explorer 6 Netscape 4 Netscape 6 Netscape 7 Opera 6 Opera 7 Firefox 1 Firefox 2

書式 padding-bottom:高さ

下パディングの高さを指定します。
負の値を指定することはできません。

記述例

--- CSSの記述 ---

/* 下パディングの高さを指定 */
P.pbot{
padding-bottom:48px;
background-color:#98fb98;
}

--- HTMLの記述 ---
<P class="pbot">下に48pxのパディング</P>
かきくけこ

ブラウザで表示

下に48pxのパディング

かきくけこ

★左パディングを指定する

Internet Explorer 4 Internet Explorer 5 Internet Explorer 5mac Internet Explorer 5.5 Internet Explorer 6 Netscape 4 Netscape 6 Netscape 7 Opera 6 Opera 7 Firefox 1 Firefox 2

書式 padding-left:幅

左パディングの幅を指定します。
負の値を指定することはできません。

記述例

--- CSSの記述 ---
/* 左パディングを指定 */
P.plef{
padding-left:60px;
background-color:#ffb6c1;
}

--- HTMLの記述 ---
<P class="plef">←に60pxのパディングを指定。あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも</P>

ブラウザで表示

←に60pxのパディングを指定。あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも


★右パディングを指定する

Internet Explorer 4 Internet Explorer 5 Internet Explorer 5mac Internet Explorer 5.5 Internet Explorer 6 Netscape 4 Netscape 6 Netscape 7 Opera 6 Opera 7 Firefox 1 Firefox 2

書式 padding-right:幅

右パディングの幅を指定します。
負の値を指定することはできません。

記述例

/* 右パディングを指定 */
P.prig{
padding-right:50px;
background-color:#deb887;
}

--- HTMLの記述 ---
<P class="prig">右に50pxのパディングを指定あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも</P>

ブラウザで表示

右に50pxのパディングを指定あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも


★パディングを一括指定する

Internet Explorer 4 Internet Explorer 5 Internet Explorer 5mac Internet Explorer 5.5 Internet Explorer 6 Netscape 4 Netscape 6 Netscape 7 Opera 6 Opera 7 Firefox 1 Firefox 2

書式 padding:幅や高さ(半角スペースで区切って複数指定可能)

パディングを一括指定します。負の値を指定することはできません。
値1つの場合:上下左右のパディングが一括指定されます。
2つの場合:記述した順に上下・左右にパディングが指定されます。
3つの場合:記述した順に上・左右・下にパディングが指定されます。
4つの場合:記述した順に上・右・下・左にパディングが指定されます。

記述例

--- 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のマージン。ABCDEFGHIJKLMNOPQRSTUVWXYZ</P>
<HR>

<P class="pad2">上下25px 左右に30pxのパディング。ABCDEFGHIJKLMNOPQRSTUVWXYZ</P>
<HR>

<P class="pad3">上15px 左右22px 下48pxのパディング。ABCDEFGHIJKLMNOPQRSTUVWXYZ</P>
<HR>

<P class="pad4">上30px 左20px 下50px 右15pxのパディング。ABCDEFGHIJKLMNOPQRSTUVWXYZ</P>
<HR>

<P class="pad5">15pxのパディングと25pxのマージン。ABCDEFGHIJKLMNOPQRSTUVWXYZ</P>

ブラウザで表示

上下左右に27pxのマージン。ABCDEFGHIJKLMNOPQRSTUVWXYZ


上下25px 左右に30pxのパディング。ABCDEFGHIJKLMNOPQRSTUVWXYZ


上15px 左右22px 下48pxのパディング。ABCDEFGHIJKLMNOPQRSTUVWXYZ


上30px 左20px 下50px 右15pxのパディング。ABCDEFGHIJKLMNOPQRSTUVWXYZ


15pxのパディングと25pxのマージン。ABCDEFGHIJKLMNOPQRSTUVWXYZ


トップページ
Copy right (C) 2007「めもタグ」ROBE@管理人