IMG和H2元素之间的外边距折叠不起作用

Question

3

为什么图片和h2之间的垂直margin不会折叠？以下是我的代码和样式。根据所有的阅读，没有因为它是img标签而有任何例外。是因为IMG在技术上是内联元素吗？至少在Chrome中，它会添加顶部和底部margin。在最好的实践中，将图片包装在块级元素中是否更好？

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

样式：

img, h2 {
    margin: 2em 0;
}

-- 编辑：当我将img用P标签包裹并将margn应用于它时，预计会发生margin折叠。那么最佳实践是什么呢？

- gdbj

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oriol · Accepted Answer

仅在块之间，外边距会折叠：

当且仅当以下条件成立时，两个外边距是相邻的：

它们都属于参与同一块级格式化上下文的流内块级框

[...]

但图片默认为行内级别。将其转换为块级别：

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

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