html - 显示内联导致元素被进一步向下推

Question

如果你在这里查看我的代码笔:

http://codepen.io/anon/pen/LHBqs

并将 img 上的“display: block”更改为“display: inline”，这会导致文本“Fine dining in a casual environment”被进一步推送向下。

它下面的“Fine dining”元素是h2，它是 block 元素，那么为什么img标签是 block 还是内联，因为 block 元素不能与内联元素出现在同一行？

Answer 1

这与边距折叠有关 - 你的 img 和它下面的 h2 的边距相互“接触”，但对于 block 元素边距折叠(合并为一个)，而对于行内元素，它们不适用并且它们都适用，因此需要额外的空间。

查看这篇文章 - http://www.howtocreate.co.uk/tutorials/css/margincollapsing