IMGとH2要素間のマージンが崩壊する

Question

イメージとh2の間の垂直マージンが崩壊しない理由はありますか？私は次のコードとスタイルを持っています。すべての読書から、それがimgタグであることから例外はありません。それはIMGが技術的にインラインであるからですか？ Chromeでは少なくとも、上下に余白が追加されています。イメージをブロック要素にラップするほうがよいでしょうか？

<section id="test"> 
    <img src="img/web_dev2@2x.png"/> 
    <h2>Test</h2> 
</section> 

スタイル：

img, h2 { 
    margin: 2em 0; 
} 

- 編集： 私はPタグとIMGをラップし、代わりにそれにマージンを適用すると予想されるように、マージンは、崩壊します。その後、ベストプラクティスは何ですか？

Answer 1

マージンブロック間の唯一のcollapsesは：

二つのマージンがadjoiningある場合にのみ：両方ともに属し

• イン・フローと同じblock formatting context
• [参加block-level boxes .. 。]

しかし、画像はデフォルトでインラインレベルです。それをBlockify：

img, h2 { 
 
    display: block; 
 
    margin: 2em 0; 
 
}

<section id="test"> 
 
    <img src="/favicon.ico"/> 
 
    <h2>Test</h2> 
 
</section>