floatプロパティを使って、画像の横に文章を回り込ませたはいいけど、
「画像と文章がくっついて見づらいわ!」
っていう時が多々あるよね。
そういう時はmarginを使って、画像と文章の間にすき間を空ければいいことを学んだ。
例えば、
【CSS】
img {
float:left;
}
として画像を左側に配置して、文章を右側に回り込ませたとする。
上図のように画像と文章がくっついてしまい、文章が読みにくい。
この問題を解消し、画像と文章にすき間を空けるために、
floatプロパティを設定したセレクタにmarginプロパティを設定するのだ。
※ちなみにセレクタとはHTMLのタグとかclass="~"とかid="~"ってやつね
だから、さっきの
【CSS】
img {
float:left;
}
にmarginプロパティを追加すればOKってことだ。
画像の右隣に文章があるから、画像の右側に余白を作れればいいわけだから
【CSS】
img {
float:left;
margin-right:10px;
}
と追加すれば、
上図のように画像と文章の間が空く。
余白の大きさは「margin-right:10px;」の部分で調整しているので、もっと隙間を空けたければ30pxと数値を大きくすればいいのだ。
全然難しいことじゃなかったけど、知らない時は途方もないことに感じてしまっていた(笑)