【WordPress】囲み枠の見出しタイトルと本文の間に隙間ができた時の修正方法

WordPressでブログを書くにあたり、囲み枠の見出しタイトルと本文が離れてしまうという現象が起こってしまう場合と、正常に表示される場合の違いを以下に書きました。

正常な囲み枠

<p><div>
<div style="background: #00ccff; padding: 5px 10px; color: #ffffff; text-align: center;">
<strong>見出しタイトル</strong>
</div>
<div style="background: #ffffea; padding: 10px; border: 2px solid #00ccff;">
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div></p>

間違った囲み枠

<p>
<div style="background: #00ccff; padding: 5px 10px; color: #ffffff; text-align: center;">
<strong>見出しタイトル</strong>
</div>
<div style="background: #ffffea; padding: 10px; border: 2px solid #00ccff;">
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</p>

<div>と</div>で囲むだけで修正できます。もしこれでハマってる方がいたらぜひ参考にしてください。ちなみに私はこれでハマり、何をやっても修正できないまま泥沼化し、結果的にブログを初期化まで試しました。しかも初期化までして囲み枠の問題は直らないままという絶望を味わいました。で、その絶望の最中、色々なサイトのソースコードを見ながら何か違いがないかと調べまくった結果がこれです。

※ この方法で必ず解決するというわけではありませんのでその点ご了承ください。

この記事が本ブログの一番最初に来ているのはそんな事情があるからなのです。初期化して綺麗さっぱり全部なくなりましたが、心機一転開き直ってこれからまた頑張ってブログを更新していきます！！