見出しには、上に2文字分のパディング、左に30%のパディングを空けています。段落には、下に2文字分、右に20%のパディングを空けています。背景色は、パディング領域と内容領域に塗られます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>上下左右のパディングを指定する</title>
<style type="text/css">
<!--
body { background-color: #AAD; color: black; }
h1 { padding-left: 30%; padding-top: 1em;
background-color: #FFC;
font: bold 2em "Trebuchet MS"; }
p { padding-bottom: 2em; padding-right: 20%;
background-color: white; }
-->
</style>
</head>
<body>
<h1 lang="en">The padding properties</h1>
<p>見出しには、上に2文字分のパディング、左に30%のパディングを空けています。段落には、下に2文字分、右に20%のパディングを空けています。背景色は、パディング領域と内容領域に塗られます。</p>
</body>
</html>