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;
}

- 编辑： 当我用im标签包装img并对其应用边距时，边缘会像预期的那样崩溃。那么最佳做法是什么？

Answer 1

块之间的保证金collapses：

  

当且仅当：{/ p>时，两个边距为adjoining      

  
• 都属于参与同一block-level boxes
的流入block formatting context   
• [...]
  

但默认情况下，图像是内联级别的。封锁它：

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

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