为什么在 Firefox 中删除了未加载图像周围的间距？

Answer 1

Firefox 正在将损坏的图像视为内联元素。在正常情况下，图像是替换的内联元素，因此填充适用于它。当没有图像内容时，Firefox 似乎会忽略“替换”部分，并将图像仅视为“内联元素”，并且应用于 内联元素的填充不会影响布局

我不知道这是否是正确的行为（需要深入研究规范），但要克服这个问题，请制作图像

inline-block

<h2>If image loads, padding is fine</h2>
<img src="https://picsum.photos/200" alt="alt">

<h2>Firefox issue if image does not load: img is moved upwards</h2>
<img src="broken" alt="alt">

<style>
img {
  padding: 50px 0;
  background-color: #ccc;
  display: inline-block;
}