パッディングを使う
ここでは要素のことをボックスと呼びます。
背景色やテーブルなどでの内容の位置を変えることが出来ます。
イメージとしては以下のような感じです。
ボックスの中に入っている内容を上下左右押し込むようなレイアウトをしてくれます。
パッディングを指定したい場合、以下のような形を取ります。
#には全て数字が入ります。
padding-left:
#;
ボックスの内容を左から押し込む形にする。
padding-right:
#;
ボックスの内容を右から押し込む形にする。
padding-top:
#;
ボックスの内容を上から押し込む形にする。
padding-bottom:
#;
ボックスの内容を下から押し込む形にする。
padding:
値;
で指定する場合、位置関係で適用されるパッディングが違ってきます。
padding:
#;
#は上下左右のパッディングを指定します。
padding: #
*;
#は上と下のパッディングを指定します。
*は左と右のパッディングを指定します。
padding: # *
?;
#は上のパッディングを指定します。
*は左右のパッディングを指定します。
?は下のパッディングを指定します。
padding:
# * +
?;
#はpadding-topと同じ
*はpadding-rightと同じ
+はpadding-bottomと同じ
?はpadding-leftと同じ
<style
type="text/css">
p {background-color: #000000; color="#FFFFFF";
width: 200px; height: 30px; padding: 10px
;}
</style>
<p>文字文字文字</p>
文字文字文字
文字の数が少ないのもありますが、上下左右に空白が出来ているのが分かると思います。
文字数を多くするか長さを狭くすると右のパッディングも適用されているのが分かります。
[MENUに戻る]
[HOME]