サイト内検索

...スタイルシート(css)...

スタイルシート・ボックス

内側の余白

内側の余白は、paddingプロパティを指定します。
[使い方]
.sample{padding:50px;}
.sample{padding-top:10px;}

「paddingとmarginの違い」は、こちらです。

プロパティ名 説明
padding:; 「数値+単位」(例・・100px)を指定します。
単位は、「px」・「em」など、または「%」を指定します。
auto(自動)

[paddingの指定方法]
プロパティ名
(サンプル)
説明
padding:10px;上下左右 の指定をします。
padding:10px 20px;上下・左右 の指定をします。
padding:10px 20px 30px;上・左右・下 の指定をします。
padding:10px 20px 30px 40px;上・右 ・下・左 の指定をします。

[個別の設定方法]
プロパティ名
(サンプル)
説明
padding-top: 10px;上の余白の指定をします。
padding-right:20px;右の余白の指定をします。
padding-bottom:30px;下の余白の指定をします。
padding-left:40px;左の余白の指定をします。

サンプル

[headの中]

<style type="text/css">
<!--
.sam{
width: 350px;
background-color: #ccff99;
}
.sample1{
padding: 30px;
}
.sample2{
padding-top: 10px;
padding-bottom: 10px;
}
-->
</style>

[bodyの中]

<div class="sample1">padding:50px;</div>
<div class="sample2">padding-top:10px;padding-bottom:10px;</div>

[ブラウザ上]

padding: 50px;
padding-top: 10px; padding-bottom: 10px;

Copyright c 2007.10.01 luc All rights reserved.