float画像と文字の間に隙間がほしい

float画像の周りのmargin 

画像の周りに隙間がほしくなるかもしれません。画像の下側は行の高さと画像の高さの関係でたくさん空くことがあります。

あいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねの

このような時は、img に margin を設定します。

img.smp2{
  margin :8px 8px 0 0;
}

あいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねの

画像の上と右に 8ピクセルの余白をつくりました。場合によっては 上に入れずに 右だけにマージンを設定する方がいいかもしれません。

文章が短いとき

文章が短いときに次にくる clear を設定したブロックがくっつきます。ブロックに上マージンが設定されていても隙間は空きません。

あいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねの

clear設定してある次のブロック

画像のほうに下マージンをとる

画像のほうに下マージンをとっておくと防げます。

img.smp3{
  margin :8px 8px 8px 0;
}

あいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねのあいうえおかきくけこさしすせそたちつてとなにぬねの

clear設定してある次のブロック


聖愛高等学校
http://www.seiai.ed.jp/