<P>タグ内に<div>タグを挿入すると意図した動作にならないことがあります。
以下のコードを記述します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="div-in-paragraph.css" />
</head>
<body>
<p>これは段落です。段落内のDIVは<div>こちらからここまで</div>になります。</p>
<p>これは次の段落です。</p>
</body>
</html>
上記のHTMLファイルを実行すると下図の表示結果となります。一見よさそうですが、Pタグ内のdivタグの開始部分で上部にマージンがとられていることがわかります。
本来期待していたのは下図の表示結果です。
<P>タグ内に<div>タグがある場合、divタグの開始時点で段落が終了したとみなされることが原因です。
<P>タグ内にブロック要素のタグの記述を避けることでこの問題を回避できます。
以下の対策があります。
<br/>タグはブロック要素ではないため、<div>タグの代わりに<br/>タグを用いることで回避できます。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="div-in-paragraph.css" />
</head>
<body>
<p>これは段落です。段落内のDIVは<br/>こちらからここまで<br/>になります。</p>
<p>これは次の段落です。</p>
</body>
</html>
divタグ内にブロック要素が存在していた場合でもブロックは終了にならないため、divタグとpタグを入れ替える方法があります。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="div-in-paragraph.css" />
</head>
<body>
<div>これは段落です。段落内のDIVは<p>こちらからここまで</p>になります。</div>
<div>これは次の段落です。</div>
</body>
</html>
すべてdivタグで記述すると問題を回避できます。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="div-in-paragraph.css" />
</head>
<body>
<div>これは段落です。段落内のDIVは<div>こちらからここまで</div>になります。</div>
<div>これは次の段落です。</div>
</body>
</html>
