padding 【パディングの指定】

[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op6] [Op7] [Ns6] [Ns7]

paddingプロパティは、要素の内側にどれだけ余白を指定するか決める際に使用します。
また特定の部分だけに余白を指定したい場合は、padding-top、padding-right、padding-bottom、padding-leftと個別に指定する事が出来ます。

余白とコンテンツ領域の取り方は若干の慣れが必要です。余白と外枠の解釈の違い

全体に指定
padding: 10px;

上下、左右の順に指定
padding: 10px 15px;

上、右、下、左の順に指定
padding: 10px 15px 10px 20px;

paddingの使用例

CSSファイル

.sample001 {
 height: 200px;
 padding-top: 20px;
 padding-right: 0px;
 padding-bottom: 20px;
 padding-left: 50px;
 margin: 10px;
 background-color: #ffcccc;
}
.sample002 {
 height: 100px;
 padding: 10px;
 background-color: #ccccff;
}

HTMLソース

<div class="sample001">
paddingプロパティ使用例<br />
上20px 右0px 下20px 左50px
<div class="sample002">余白10px</div>
</div>

表示すると

余白関連項目

戻る

TOP