【CSS】floatプロパティで回り込ませた文章と画像の間に間隔を空けるにはmarginを使う!

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

上図のように画像と文章の間が空く。

余白の大きさは「margin-right:10px;」の部分で調整しているので、もっと隙間を空けたければ30pxと数値を大きくすればいいのだ。

全然難しいことじゃなかったけど、知らない時は途方もないことに感じてしまっていた(笑)

おすすめの記事