<P>タグ内に<div>タグを挿入すると意図した動作にならない - HTML
<P>タグ内に<div>タグを挿入すると意図した動作にならないことがあります。
コード例
以下のコードを記述します。
HTMLファイル
<!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>タグ内にブロック要素のタグの記述を避けることでこの問題を回避できます。
以下の対策があります。
<div>タグではなく<br/>タグを用いる
<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>タグと<p>タグを入れ替える
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>タグで記述する
すべて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>
実行結果
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
