I finished a personal page, which contains 2 images. But at the end of that, I noticed that I had forgotten to put the command !DOCTYPE html . When I inserted it, my images were left with a line below:
HowisDOCTYPEinfluencingthisandwhatcanIdotofixit?
<imgclass="imgcontrol" src="pictures/me.jpg" alt="Foto de Matheus Pazzinato">
When you do not declare <!DOCTYPE> the browser enters Quirks Mode , this means that it will render in some old version of HTML, this is used when you need a new support browser to a very old site.
Link to get more information: link
Already with <!DOCTYPE> set, the browser renders with the modern Web Standards. And one of the conventions is that the <img> tag by definition is an element of type inline ie it has the compotamento of a common text, so the "margin" appeared in the image.
To fix this there are several solutions, it will depend on the structure of your code and what you want for the layout. But most common is to define the image as an element of type block type like this:
img {display:inline-block} /* esse é o padrão dos browser modernos */
You can read more about it here: link
To stylize the images, I was creating a tag div with the tag img inside and using it a class . For some reason, in HTML5 the internal spacing of the div is a little larger than the photo I enter, creating this "line" that displays the background color. My solution was to simply delete the div , and use my class inside the img tag:
Before:
<div class="imgcontrol">
<img src="pictures/me.jpg" alt="Foto de Matheus Pazzinato">
</div>
Then:
<img class="imgcontrol" src="pictures/me.jpg" alt="Foto de Matheus Pazzinato">