CSSで画像（の回り込み）とテキストを上で揃える

テキストと画像の上が揃わないときがあります。基本的にテキストは、pタグが使われるので上下にマージンが設定されているので無効にすることで上が揃います。

<p style="margin:0;">テキスト</p>

参考例

画像を左にフロートさせた下のコードを使うとテキストと画像の上が揃って表示されます。

<img src="画像.png" style="float:left;">
<p>回り込み</p>

divタグにスタイルを設定して、その中にimgタグとpタグを入れるとテキストと画像の上の位置が揃っていません。

<div style="width:300px; border:solid 1px #000; padding:10px; margin:10px; overflow:hidden">
<img src="box.png" style="float:left;" />
<p>回り込み</p>
</div>

pタグのマージンを0にすると上が揃います。

<div style="width:300px; border:solid 1px #000; padding:10px; margin:10px; overflow:hidden">
<img src="box.png" style="float:left;" />
<p style="margin:0;">回り込み</p>
</div>