CODEWITHSUNDEEP
cssimagespacingalt-attribute
Xaver Fleer
Xaver Fleer

Reputation: 475

Why is spacing around not loading image removed in Firefox?

In Firefox, the spacing around images that don't load is removed.

Code to reproduce:

<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;
}
Result in Chrome ✅ Result in Firefox ❌
enter image description here enter image description here

Demo: https://jsfiddle.net/7vsu5m8q/

Upvotes: 0

Views: 28

Answers (1)

Temani Afif
Temani Afif

Reputation: 273839

Firefox is considering the broken image to be an inline element. In a normal situation, an image is a replaced inline element so padding apply to it. Firefox seems to ignore the "replaced" part when there is no image content and consider the image as "inline element" only and padding applied to inline elements won't affect the layout

I don't know if it's a correct behavior (need to dig into the Spec) but to overcome this, make the image 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;
}

Upvotes: 1

Related Questions