html - HTML で 2 つの要素間の間隔を設定するにはどうすればよいですか?

Question

私が2つの要素を持っていると<img>し<p>ましょう

<img style="background-color:#ffffff;width:250px;height:auto;float:left" src="http://somesite/p3.png" />
<p>
    alibabaanakjalanan.</p>

現在、段落の内容は画像のすぐ隣に表示されています。要素間に間隔を設定するにはどうすればよいですか?

Answer 1

画像をフローティングしている場合は、いくつかmargin-rightの .

CSS

.img {
    background-color:#ffffff;
    width:250px;
    height:auto;
    float:left;
    margin-right: 20px;
}

HTML

<img src="http://somesite/p3.png" class="img" />
<p class="para">alibabaanakjalanan.</p>

実際に http://jsfiddle.net/PqWAh/1/

これは、マークアップからスタイルを分離するためのベスト プラクティスです。

Answer 2

のマージンを追加しimgます。

margin-right:20px;

したがって、コードは

<img style="background-color:#ffffff;width:250px;height:auto;float:left;margin-right:20px;"