まず、padding-leftプロパティーで左に32ピクセルのパディングを空けます。次にbackgroundプロパティーで背景画像を指定し、並べ方をrepeat-yとします。パディング領域には背景画像が敷かれるので、段落の左にハートマークが並んでいるように見えます。
<!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: #FDD; color: black; }
p { padding-left: 32px; margin-left: 4em;
background : white url(purpie moon/mpi_heart.gif) repeat-y;
width: 60%; line-height: 1.5; }
-->
</style>
</head>
<body>
<p>まず、padding-leftプロパティーで左に32ピクセルのパディングを空けます。次にbackgroundプロパティーで背景画像を指定し、並べ方をrepeat-yとします。パディング領域には背景画像が敷かれるので、段落の左にハートマークが並んでいるように見えます。</p>
</body>
</html>
