Here is an example - https://jsfiddle.net/8qzuq881/1/

I even removed indents through the styles:

margin:0px; padding:0px;

But it does not help. How to remove the gap?

    2 answers 2

    Add a display to the picture:

     div.pre-img>img { display: block; }

    Then browsers will accurately draw its dimensions.

      By default, browsers display the img tag as an inline element (for example, text), while it has block properties (for example, a div ), so that it can be attributed closer to inline-block elements.

      If we consider img as an inline element, using text as an example,
      then we will see that the text is aligned by default with the base line , leaving empty space under the detailing element (for example, the lower part of the letters р, д, y , etc.).
      Thus, in this situation, the browser simply cannot accurately calculate the height of the line.

      Solutions:

      1. Change the alignment rule ( vertical-align ) to top or bottom

       .pre-img img { vertical-align: top; }

      2. Change the type to block

       .pre-img img { display: block; }

      3. We div.pre-img height of the line of the parent container div.pre-img

       .pre-img { line-height: 0; }

      or

       .pre-img { font-size: 0; }

      4. "We attach" the image to one of the sides float = left or right .

       .pre-img img { float: left; }