画像の配置について

画像の配置で余白を付けるには、margin を使います。
余白の上下左右の位置指定は、top、bottom、left、 right です。
余白の量は数値で指定して、1em のように数字の後に em と書きます。
書き方は、style="margin-top: 1em" とします。

margin を書く場所は <img ～～～ /> の中であればどこでも良く、順番の決まりはありません。
ここでは、上側の余白を指定した例を書いてみます。

<img width="幅" height="高さ" align="left" style="margin-top: 1em;" alt="画像説明" src="http:画像"  />

しかし、決まりはなくとも 書き順は自分でを決めておいた方が良いです。
後に margin を書き換える必要が生じた際に、 margin を書いた場所を探すのに苦労します。
もちろん、margin 以外の事についても同様です。

実際に使うには、上下左右を指定した下記の一行をコピーして貼り付けます。
em の数字を 0 にすると、余白はなくなります。
あらかじめ目的に合わせた数字に変更しておくと良いでしょう。

style="margin-top: 1em; margin-right: 1em; margin-bottom: 1em; margin-left: 1em;"

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

自分で書き順を決めた方が良いと言いましたが・・・
たしかに、ブログのせいで順番が勝手に変わってしまう事もあるようですね。
タグの自動整形のような仕掛けがあるのでしょうから、仕方ありません。
ただしその場合でも、margin は正しく機能するはずです。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

さて次に、align="left" で文章の回りこみを指定した場合の例です。
ここでは画像の上下と右の三方向に margin で 1em の余白をつけてあります。

すると文章の左と、画像の下の両方に余白が出るようになります。
「文章の左」と言いましたが、それは画像の右に余白があるからです。
余白を画像側から見るか、文章側から見るかの違いです。
少し混乱してしまいますね。
ここで、画像の脇に書くべき文章の最後に<br clear="all" />を追加。
 <br clear="all" />の後の文章は、このように画像の下から表示が始まります。
空の改行を連打して位置を調節するのは、表示が崩れる原因になりますから避けましょう。

ところで、画像の右側の文章が、画像の少し上から始まっています。
これは画像の上側に 1em の余白をつけてあるからです。
右側に書く文章の先頭を空行で改行して、始まりの位置を直すとか・・・

あるいは align="middle" に変更して、真ん中から始まるようにする事も出来ます。
ただし、この方法で真ん中に表示出来るのは、一行の文だけになります。
これは align="middle" に変更した例ですが、見てのとおり画面の横幅に納まる一行分だけしか真ん中に表示出来ません。
もちろん、画面の幅以内でも改行をすると、次の行は画像の下になってしまいます。
短いコメントを書く時には、まぁまぁ使えるかもしれません。