ウェブページの左右端に、本文に対する「挿絵」のように画像を表示させたいことがあります。本文のテキストは左側が揃っている方が読みやすいので、挿絵画像は右端に表示させるのが良いでしょう。画像だけで1行を使ってしまうのはスペースの無駄なので、右端に寄せた上で、本文を左側へ回り込ませる装飾が必要です。この「端に寄せて回り込ませる」という装飾は、スタイルシートのfloatプロパティを使うだけで簡単に作れます。

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

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

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つ指定した場合は「上・右・下・左」の順番で4辺の余白をそれぞれ指定したことになります。(※「上」から順に時計回りです。)

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

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

(更新日：2016年01月17日)