かんたん作成【HTML CSS JavaScript PHP CGI Perl Ruby Python .htaccess】

パディング（内側の間隔　padding）

<html>
<head>
<title>パディング</title>

<style type="text/css">
<!--
.c1    {
    border:        2px solid;
    margin:        30px 5px;
    padding:    1px;
}
.c2    {
    border:        2px solid;
    margin:        30px 5px;
    padding:    50px;
}
.c3    {
    border:        2px solid;
    margin:        30px 5px;
    padding:    10%;
}
.c4    {
    border:        2px solid;
    margin:        30px 5px;
    padding:    10px 50px;
}
//-->
</style>

</head>
<body>
<p class="c1">
パディング1px<br>
</p>
<p class="c2">
パディング50px<br>
</p>
<p class="c3">
パディング10％<br>
</p>
<p class="c4">
上下10px 左右50px<br>
</p>
</body>
</html>

〔実行する〕

スタイルシート(CSS)

●全体の背景色（background-color）	●全体の背景画像（background-image）
●全体の背景画像（固定　background-attachment）	●全体の背景画像（横のみ繰り返し　repeat-x）
●全体の背景画像（縦のみ繰り返し　repeat-y）	●全体の背景画像（位置指定　background-position）
●全体の背景一括指定（background）	●全体の文字色（color）
●リンク色（link, visited, hover, active）	●スクロールバーの色（scrollbar）
●フォント（font-family）	●文字サイズ（font-size）
●文字の太さ（font-weight）	●文字色（color）
●文字装飾（text-decoration）	●斜体（font-style）
●上付き文字・下付き文字（vertical-align）	●大文字変換・小文字変換（text-transform）
●行の高さ（line-height）	●文字間隔（letter-spacing）
●行揃え（text-align）	●１行目にインデント（text-indent）
●段落の１行目を装飾（first-line）	●段落の最初の１文字を装飾（first-letter）
●縦書き（writing-mode）	●自動改行しないで表示（white-space, nowrap）
●文字の背景色（background-color）	●文字の背景画像（background-image）
●枠（border-style）	●枠（太さ指定　border-width）
●枠（色指定　border-color）	●枠（一括指定　border）
●幅・高さ（width, height）	●マージン（外側の間隔　margin）
●パディング（内側の間隔　padding）	●リストスタイル（list-style-type,list-style-image,）
●番号つきリリスト（list-style-type,padding-left）	●画像サイズ（width）
●画像回り込み（float）	●画像にフィルター（透明度　filter, alpha）
●画像に枠（border）	●画像の重ね合わせ・重ねる順番指定（z-index）
●罫線の色・幅・高さ・枠	●フォームの色・サイズ
●IMEの入力モードの指定（ime-mode）	●カーソルの形を指定（cursor）
●ボタン風リンク	●画像ダウンロード対策（右クリックでの画像保存を禁止）

かんたん作成【HTML CSS JavaScript PHP CGI Perl Ruby Python .htaccess】