ページの端に、本文に対する「挿絵」のように画像を表示させたいことがあります。本文は左側が揃っている方が読みやすいので、挿絵画像は右端に表示させるのが良いでしょう。画像だけで1行使ってしまうのはスペースの無駄なので、右端に寄せた上で、本文を回り込ませる装飾が必要になります。この「端に寄せて回り込ませる」という装飾は、floatプロパティを使うだけで簡単にできます。HTMLでもalign属性を用いれば簡単にできます。（スタイルシートを使う方が望ましいですが、表示効果は同じ。）

しかし、単に右端に寄せるだけでは、本文が読みにくくなる可能性があります。なぜなら、本文と画像との間隔が狭すぎるためです。floatプロパティやalign属性を使っただけでは、本文と画像との間隔が詰まってしまうのですよね。読みやすくするためには、本文と画像の間に適度な間隔を取りたいものです。（右上図参照）

そこで、画像にマージン（外側の余白）を加えます。floatプロパティで右端に寄せると同時に、marginプロパティで余白を設けると、うまい具合に読みやすく表示できます。
例えば、以下のよーな感じで書きます。

img.sashie {
   float: right;
   margin: 0px 0px 0.5em 0.5em;
}

まず、floatプロパティに値「right」を指定することで、この画像（sashieクラスのimg要素）は右端に寄せられます。後続の文字列は左側に回り込みます。
次に、marginプロパティで余白量を指定します。ここでは「0px 0px 0.5em 0.5em」のように値を4つ指定しています。marginプロパティに値を4つ指定した場合は、「上・右・下・左」の余白をそれぞれ指定したことになります。（※「上」から順に時計回りです。）

ここでは、画像を右端に寄せているので、必要な余白は、「画像の左側」と「画像の下側」です。そこに、0.5文字分の余白を設けています。この程度の空間を作れば十分でしょう。もちろん、好みに応じて、1em(1文字分）とか3pxとか指定しても構いません。

上記は、先ほどのスタイルシートソースを使って画像付き段落を表示させてみた例です。だいたいこれくらいの間隔があれば、本文も画像も読みやすい（見やすい）でしょう。