如果你在这里查看我的codepen：
http://codepen.io/anon/pen/LHBqs
并将img上的“display: block”更改为“display: inline”，这会导致文本“在休闲环境中精致美食”被进一步推下。
它下面的“Fine dining”元素是h2，它是一个块元素，那么为什么img标记是块还是内联会有所不同，因为块元素不能与内联元素显示在同一行？
答案 0 :(得分：3)
这与保证金折叠有关 - 您的img和h2下面的{{1}}边距相互“接触”，但是对于块元素，边距会折叠（合并为一个），而对于内联元素他们没有，他们都适用，因此额外的空间。
查看此文章 - http://www.howtocreate.co.uk/tutorials/css/margincollapsing