上下左右のパディングを個別に指定する

[新着] Webテンプレートを仮オープンしました


padding-***: ***;

ブラウザ
Internet Explorer Netscape Firefox Opera
参考
書式基本 要素名 クラス ID

padding-*** は、上下左右のパディング(内側の余白)を個別に指定するプロパティです。
*** の部分には、toprightbottomleft が入ります)


div {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}


padding-top 上のパディングを指定します
padding-right 右のパディングを指定します
padding-bottom 下のパディングを指定します
padding-left 左のパディングを指定します

パディングの大きさは、数値+単位(px、他)か %(割合)、auto(自動)で指定します。


使用例

<html>
<head>
<title>TAG index Webサイト</title>

<style type="text/css">
<!--

p {
width: 200px;
background-color: #85b9e9;

padding-top: 20px;
padding-bottom: 50px;
}


-->
</style>

</head>
<body>

<p>上に20px、下に50pxのパディング</p>

</body>
</html>

これをブラウザで見ると次のように表示されます

上に20px、下に50pxのパディング



[特集] レンタルサーバー比較 & サーバー選びのチェックポイント

サイト内検索について - ベーシック版