スタイルシートリファレンス > padding

スタイルシートリファレンス padding


padding パディング上下左右を指定する (IE3/N4)

パディング(内側の余白)上下左右をまとめて指定します。


padding:1em;
上下左右1em
padding:1em 2em;
上下1em 左右2em
padding:1em 2em 3em;
上1em 左右2em 下3em
padding:1em 2em 3em 4em;
上1em 右2em 下3em 左4em


数値指定
px,em
割合指定
%

px
画像を構成する最小単位 (モニタの解像度により変化)
em
文字の高さを1とした単位 (フォントサイズにより変化)

▲ページ先頭へ

使用例 padding

テーブルの<td>タグにパディングを指定します。

HTMLソース

<html>
<head>
<title>CSS テスト</title>
<style type="text/css">
<!--
.smp1 {
background-color: #cccccc;
padding: 10px;
}
.smp2 {
background-color: #cccccc;
padding: 10px 20px;
}
.smp3 {
background-color: #cccccc;
padding: 10px 20px 30px;
}
.smp4 {
background-color: #cccccc;
padding: 10px 20px 30px 40px;
}
-->
</style>
</head>
<body>
<table>
<tr><td class="smp1">パディング 上下左右10px</td></tr>
</table>
<table>
<tr><td class="smp2">パディング 上下10px 左右20px</td></tr>
</table>
<table>
<tr><td class="smp3">パディング 上10px 左右20px 下30px</td></tr>
</table>
<table>
<tr><td class="smp4">パディング 上10px 右20px 下30px 左40px</td></tr>
</table>
</body>
</html>

▲ページ先頭へ

ブラウザ上の表示


パディング 上下左右10px

パディング上下10px 左右20px

パディング上10px 左右20px 下30px;

パディング上10px 右20px 下30px 左40px

▲ページ先頭へ

関連項目【パディング】

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

▲ページ先頭へ

スタイルシートリファレンス > padding