html - IMG和H2元素之间的边距崩溃不起作用

图像和h2之间的垂直边距没有崩溃是有原因的吗？我有以下代码和样式。从所有读物来看，由于它是img标签，因此也不例外。是因为IMG在技术上是在线的吗？至少在Chrome浏览器中，添加了上下边距。将图像包装在块元素中是更好的做法吗？

<section id="test">
    <img src="img/[email protected]"/>
    <h2>Test</h2>
</section>

样式：

img, h2 {
    margin: 2em 0;
}

-编辑：
当我用P标签包裹img并为其应用边距时，边距会按预期崩溃。那么什么是最佳实践？

最佳答案

块之间仅保证金collapses：


  当且仅当：
  
  
  都属于参与同一adjoining的流入block-level boxes
  [...]
  


但是图像默认为内联级别。屏蔽它：

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

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

关于html - IMG和H2元素之间的边距崩溃不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40182877/