<! DOCTYPE html> changing image

Question

I finished a personal page, which contains 2 images. But after that, I noticed that I forgot to put the command !DOCTYPE html. When I inserted it, my images got a line underneath:

Like the DOCTYPE is influencing this and what I can do to fix?

<img class="imgcontrol" src="pictures/me.jpg" alt="Foto de Matheus Pazzinato">

Answer 1

When you don’t declare the <!DOCTYPE> the browser enters the Quirks Mode, this means that it will render in some old version of HTML, this is used when you need a new browser to support a very old site.

Link for you to find out more: https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode

Already with the <!DOCTYPE> defined, the browser renders with modern Web Standards. And one of the conventions is that the tag <img> by definition is an element of the type inline that is, it has the composition of a common text, so the "margin" appeared in the image.

To fix this there are several solutions, there will depend on the structure of your code and what you want for the layout. But the most common is to define the image as a block type element like this:

img {display:inline-block} /* esse é o padrão dos browser modernos */

You can read more about it here: https://developer.mozilla.org/en-US/docs/Archive/Misc_top_level/Images,_Tables,_and_Mysterious_Gaps

Answer 2

To style the images, I was creating a tag div tagged img inside and using in it a class. For some reason, in HTML5 the internal spacing of the div is slightly larger than the photo I insert, creating this "line" that displays the background color. My solution was to simply delete the div, and use my class within the tag img:

Before:

  <div class="imgcontrol">
      <img src="pictures/me.jpg" alt="Foto de Matheus Pazzinato">
    </div>

Afterward:

<img class="imgcontrol" src="pictures/me.jpg" alt="Foto de Matheus Pazzinato">