Different rendering of HTML (images) depending on DOCTYPE

Question

Why does the rendering with DOCTYPE have the unwanted effect of having the additional spacing after the first image. The unwanted space is in the position where the 0px height image would be?

Without DOCTYPE: https://codesandbox.io/s/image-taking-space-in-block-layout-forked-76oyl?file=/index.html

<html>
  <body>
    <div style="background-color: red;">
      <img
        alt="asd"
        src="https://www.wallpaperuse.com/wallp/0-1226_m.jpg"
        width="500"
        height="500"
        style="height: 200px;"
      />
      <img
        alt="asd"
        src="https://www.wallpaperuse.com/wallp/0-1226_m.jpg"
        width="500"
        height="500"
        style="height: 0px;"
      />
    </div>
  </body>
</html>

With DOCTYPE: https://codesandbox.io/s/image-taking-space-in-block-layout-forked-rlsct?file=/index.html

<!DOCTYPE html>
<html>
  <body>
    <div style="background-color: red;">
      <img
        alt="asd"
        src="https://www.wallpaperuse.com/wallp/0-1226_m.jpg"
        style="width: 500px; height: 200px;"
      />
      <img
        alt="asd"
        src="https://www.wallpaperuse.com/wallp/0-1226_m.jpg"
        style="width: 500px; height: 0px;"
      />
    </div>
  </body>
</html>

I don't pretend to know why this is happening as styling has always seemed like pure voodoo to me, but it's not React causing it. I put the test HTML directly in the root div (in public/index.html) and served it. You get exactly the same odd behavior you're seeing. That said. Are you sure you want to do this? It seems bizarre to be setting both CSS style height and height/width attributes. Also, it seems weird in a React app to be rendering the 0 height images at all. Why not set your app to only render the image that is appropriate to the current index? — dpwr, Dec 07 '20 at 22:58
While this question was a really good trivia, it should now be updated to include the relevant [mcve] to really focus on the missing DOCTYPE difference and it could be linked to: [What happens if I don't put a ` ` in my code? Will it make any major changes?](https://stackoverflow.com/questions/23230798/what-happens-if-i-dont-put-a-doctype-html-in-my-code-will-it-make-any-major) — Emile Bergeron, Dec 08 '20 at 03:40

dpwr · Accepted Answer · 2020-12-08T09:32:38.490

When DOCTYPE is not specified, the browser renders it in "Quirks mode", which is a backwards compatible mode for older pages designed for ancient browsers. It thus renders things as was intended (as best as the browser can guess) in times of yore.

So, basically, when you get that extra offset, that is the correct HTML rendering according to W3C specs.

I suggest that images that should not be displayed are set to hidden or a similar solution, rather than setting their height to 0px.

Original Suggestion before edited question (when React was involved):

I think you'd be better off with code that only renders the image you want to see (I infer this from your original example). Something like this:

const App = img_src => (
  <div>
    <img
      alt="asd"
      src={img_src}
      width="500"
      height="500"
    />
  </div>
);

You see that you know what is happening. I cannot believe that DOCTYPE is the cause :D. This is pretty fine debugging of yours! — croraf, Dec 07 '20 at 23:54
I looked at the question because I was sure I'd solve it in 2 seconds flat. 40 minutes later... I had at least learnt something new! — dpwr, Dec 07 '20 at 23:58

Different rendering of HTML (images) depending on DOCTYPE

1 Answers1